vue2中使用less简易教程


Posted in Javascript onMarch 27, 2018

首先,说明一点,如果是使用npm init webpack 项目名 的方式创建的项目,无需手动配置webpack

所以再vue中使用less就非常简单了,只需要安装less, less-loader就行了

步骤

npm install less less-loader --save //将less和less-loader安装到开发依赖
npm run dev

如果安装成功那么就可以再vue组件中使用less了

<style lang="less" scoped>
 .hello{
  a{
   color:red;
  }
 }

补充:

vue中 如何使用less

http://element.eleme.io/     //

elementUI是基于vue2

vue中使用less

首先vue开发环境已经安装成功

当所有东西都 准备好之后 :

第一步:

安装less依赖,npm install less less-loader --save

第二步:

修改webpack.config.js文件,配置loader加载依赖,让其支持外部的less,在原来的代码上添加

{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader",
},

现在基本上已经安装完成了,然后在使用的时候在style标签里加上lang=”less”里面就可以写less的代码了(style标签里加上 scoped 为只在此作用域 有效)

(或者
@import './index.less'; //引入全局less文件
)。
(
html中直接引入:
<link rel="stylesheet/less" type="text/css" href="文件路径/styles.less" rel="external nofollow" >
<script src="文件路径/less.js" type="text/javascript"></script>
)
Javascript 相关文章推荐
[原创]静态页面也可以实现预览 列表不同的显示方式
Oct 14 Javascript
(转载)JavaScript中匿名函数,函数直接量和闭包
May 08 Javascript
JavaScript isPrototypeOf和hasOwnProperty使用区别
Mar 04 Javascript
jquery图片滚动放大代码分享(2)
Aug 28 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
Sep 19 Javascript
基于javascript制作微信聊天面板
Aug 09 Javascript
js类式继承与原型式继承详解
Apr 07 Javascript
JavaScript实现省市县三级级联特效
May 16 Javascript
JavaScript 复制对象与Object.assign方法无法实现深复制
Nov 02 Javascript
JS模拟浏览器实现全局搜索功能
Sep 11 Javascript
ionic+html5+API实现双击返回键退出应用
Sep 17 Javascript
详解JS数组方法
Nov 20 Javascript
浅谈Vue内置component组件的应用场景
Mar 27 #Javascript
js中apply和Math.max()函数的问题及区别介绍
Mar 27 #Javascript
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
Mar 27 #Javascript
Angular使用操作事件指令ng-click传多个参数示例
Mar 27 #Javascript
JavaScript代码实现txt文件的上传预览功能
Mar 27 #Javascript
Angularjs实现控制器之间通信方式实例总结
Mar 27 #Javascript
Angular中使用better-scroll插件的方法
Mar 27 #Javascript
You might like
修改Zend引擎实现PHP源码加密的原理及实践
2008/04/14 PHP
php使用google地图应用实例
2014/12/31 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
[原创]PHP实现SQL语句格式化功能的方法
2017/07/28 PHP
Laravel框架自定义公共函数的引入操作示例
2019/04/16 PHP
PHP进阶学习之依赖注入与Ioc容器详解
2019/06/19 PHP
PHP操作Redis常用命令的实例详解
2020/12/23 PHP
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
2013/10/17 Javascript
jQuery中slideUp 和 slideDown 的点击事件
2015/02/26 Javascript
第九篇Bootstrap导航菜单创建步骤详解
2016/06/21 Javascript
静态页面html中跳转传值的JS处理技巧
2016/06/22 Javascript
bootstrapfileinput实现文件自动上传
2016/11/08 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
2017/03/25 Javascript
浅谈angularjs中响应回车事件
2017/04/24 Javascript
nodejs+websocket实时聊天系统改进版
2017/05/18 NodeJs
webpack写jquery插件的环境配置
2017/12/21 jQuery
仿vue-cli搭建属于自己的脚手架的方法步骤
2019/04/17 Javascript
react 生命周期实例分析
2020/05/18 Javascript
[05:17]DOTA2誓师:今天我们在这里 明天TI4等我!
2014/03/26 DOTA
Python实现Const详解
2015/01/27 Python
python实现带错误处理功能的远程文件读取方法
2015/04/29 Python
举例详解Python中threading模块的几个常用方法
2015/06/18 Python
Python中的defaultdict与__missing__()使用介绍
2018/02/03 Python
对Python中range()函数和list的比较
2018/04/19 Python
用Python3创建httpServer的简单方法
2018/06/04 Python
获取django框架orm query执行的sql语句实现方法分析
2019/06/20 Python
安装好Pycharm后如何配置Python解释器简易教程
2019/06/28 Python
通过实例解析python创建进程常用方法
2020/06/19 Python
python 实现图片批量压缩的示例
2020/12/18 Python
加拿大知名的国际儿童品牌:Hatley
2016/11/09 全球购物
建筑学推荐信
2013/11/03 职场文书
副乡长民主生活会个人对照检查材料思想汇报
2014/10/01 职场文书
党员个人整改措施
2014/10/24 职场文书
2014年幼儿园教师工作总结
2014/11/08 职场文书
2014年教师工作总结
2014/11/10 职场文书
基于Python实现nc批量转tif格式
2022/08/14 Python