vue cli安装使用less的教程详解


Posted in Javascript onJuly 12, 2019

vue-cli构建的项目默认是不支持less的,需要自己添加依赖

1.安装less和less-loader ,在项目目录下运行如下命令

npm install less less-loader --save-dev

vue cli安装使用less的教程详解

2.安装成功后,打开build/webpack.base.conf.js ,在 module.exports = 的对象的module.rules 后面添加一段:

module.exports = {

// 此处省略无数行,已有的的其他的内容
module: {
  rules: [
   // 此处省略无数行,已有的的其他的规则
   {
    test: /\.less$/,
    loader: "style-loader!css-loader!less-loader",
   }
  ]
 }
}

vue cli安装使用less的教程详解

3.最后,在代码中的style标签中加上lang="less"属性即可

<style lang="less" scoped>
 .index-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  span {
   font-size: 0.373rem;
  }
 }
</style>

总结

以上所述是小编给大家介绍的vue cli安装使用less的教程详解 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
pjblog中的UBBCode.js
Apr 25 Javascript
JS 密码强度验证(兼容IE,火狐,谷歌)
Mar 15 Javascript
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
Mar 24 Javascript
js实现俄罗斯方块小游戏分享
Jan 31 Javascript
Extjs 4.x 得到form CheckBox 复选框的值
May 04 Javascript
简述jQuery ajax的执行顺序
Jan 05 Javascript
Angularjs的ng-repeat中去除重复数据的方法
Aug 05 Javascript
jQuery实现的浮动层div浏览器居中显示效果
Feb 03 Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
Mar 05 Javascript
js中null与空字符串&quot;&quot;的区别讲解
Jan 17 Javascript
详解如何在Vue项目中发送jsonp请求
Oct 25 Javascript
JavaScript如何实现防止重复的网络请求的示例
Jan 28 Javascript
Js通过AES加密后PHP用Openssl解密的方法
Jul 12 #Javascript
django js 实现表格动态标序号的实例代码
Jul 12 #Javascript
JavaScript中的连续赋值问题实例分析
Jul 12 #Javascript
微信小程序开发常见问题及解决方案
Jul 11 #Javascript
使用vue for时为什么要key【推荐】
Jul 11 #Javascript
利用Angular7开发一个Radio组件的全过程
Jul 11 #Javascript
vue发送websocket请求和http post请求的实例代码
Jul 11 #Javascript
You might like
PHP利用COM对象访问SQLServer、Access
2006/10/09 PHP
从康盛产品(discuz)提取出来的模板类
2011/06/28 PHP
用穿越火线快速入门php面向对象
2012/02/22 PHP
php操作csv文件代码实例汇总
2014/09/22 PHP
适用于初学者的简易PHP文件上传类
2015/10/29 PHP
laravel 修改记住我功能的cookie保存时间的方法
2019/10/14 PHP
js parseInt(&quot;08&quot;)未指定进位制问题
2010/06/19 Javascript
基于jquery的模态div层弹出效果
2010/08/21 Javascript
自己动手写的jquery分页控件(非常简单实用)
2015/10/28 Javascript
jQuery操作Table技巧大汇总
2016/01/23 Javascript
JavaScript的React框架中的JSX语法学习入门教程
2016/03/05 Javascript
VUE实现一个分页组件的示例
2017/09/13 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
2017/11/21 Javascript
JavaScript轮播停留效果的实现思路
2018/05/24 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
2019/01/24 Javascript
jQuery实现form表单基于ajax无刷新提交方法实例代码
2019/11/04 jQuery
基于JS实现快速读取TXT文件
2020/08/25 Javascript
利用Python脚本生成sitemap.xml的实现方法
2017/01/31 Python
Python连接数据库学习之DB-API详解
2017/02/07 Python
python3制作捧腹网段子页爬虫
2017/02/12 Python
Python表示矩阵的方法分析
2017/05/26 Python
Django模板变量如何传递给外部js调用的方法小结
2017/07/24 Python
Python内存管理方式和垃圾回收算法解析
2017/11/11 Python
python 返回列表中某个值的索引方法
2018/11/07 Python
python检测IP地址变化并触发事件
2018/12/26 Python
Python设计模式之状态模式原理与用法详解
2019/01/15 Python
Django框架实现的普通登录案例【使用POST方法】
2019/05/15 Python
Django ORM filter() 的运用详解
2020/05/14 Python
高中生学习总结的自我评价范文
2013/10/13 职场文书
物流专业毕业生推荐信范文
2013/11/18 职场文书
生产副总岗位职责
2013/11/28 职场文书
工资收入证明样本(5篇)
2014/09/16 职场文书
2014年保险公司工作总结
2014/11/22 职场文书
欠款纠纷起诉状
2015/05/19 职场文书
如何在python中实现ECDSA你知道吗
2021/11/23 Python
PYTHON InceptionV3模型的复现详解
2022/05/06 Python