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 相关文章推荐
prototype class详解
Sep 07 Javascript
javascript入门基础之私有变量
Feb 23 Javascript
onsubmit阻止form表单提交与onclick的相关操作
Sep 03 Javascript
JavaScript中提前声明变量或函数例子
Nov 12 Javascript
js检测用户输入密码强度
Oct 22 Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
Nov 03 Javascript
js仿淘宝商品放大预览功能
Mar 15 Javascript
Angularjs实现控制器之间通信方式实例总结
Mar 27 Javascript
js根据需要计算数组中重复出现某个元素的个数
Jan 18 Javascript
js实现随机8位验证码
Jul 24 Javascript
js函数柯里化的方法和作用实例分析
Apr 11 Javascript
vue中v-for循环选中点击的元素并对该元素添加样式操作
Jul 17 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中使用Sockets 从Usenet中获取文件
2008/01/10 PHP
php+js iframe实现上传头像界面无跳转
2014/04/29 PHP
php实现获取局域网所有用户的电脑IP和主机名、及mac地址完整实例
2014/07/18 PHP
利用php做服务器和web前端的界面进行交互
2016/10/31 PHP
javascript生成/解析dom的CDATA类型的字段的代码
2007/04/22 Javascript
通用javascript脚本函数库 方便开发
2009/10/13 Javascript
js中apply方法的使用详细解析
2013/11/04 Javascript
Js冒泡事件详解及阻止示例
2014/03/21 Javascript
javascript使用正则表达式实现去掉空格之后的字符
2015/02/15 Javascript
JavaScript提高性能知识点汇总
2016/01/15 Javascript
jQuery中的100个技巧汇总
2016/12/15 Javascript
vue+element实现批量删除功能的示例
2018/02/28 Javascript
解决Nodejs全局安装模块后找不到命令的问题
2018/05/15 NodeJs
LayUI表格批量删除方法
2018/08/15 Javascript
分享5个顶级的JavaScript Ajax组件库
2018/09/16 Javascript
纯js+css实现在线时钟
2020/08/18 Javascript
vue内置组件keep-alive事件动态缓存实例
2020/10/30 Javascript
javascript实现电商放大镜效果
2020/11/23 Javascript
Python3实现发送QQ邮件功能(html)
2017/12/15 Python
windows下python和pip安装教程
2018/05/25 Python
解决python "No module named pip" 的问题
2018/10/13 Python
pandas DataFrame的修改方法(值、列、索引)
2019/08/02 Python
python Web flask 视图内容和模板实现代码
2019/08/23 Python
python GUI库图形界面开发之PyQt5工具栏控件QToolBar的详细使用方法与实例
2020/02/28 Python
Vichy薇姿加拿大官网:法国药妆,全球专业敏感肌护肤领先品牌
2018/07/11 全球购物
校园奶茶店创业计划书
2014/01/23 职场文书
《毛主席在花山》教学反思
2014/04/20 职场文书
祖国在我心中的演讲稿
2014/05/04 职场文书
超越自我演讲稿
2014/05/21 职场文书
交通事故委托书范本
2014/09/28 职场文书
不同意离婚代理词
2015/05/23 职场文书
2016年党员学习廉政准则心得体会
2016/01/20 职场文书
golang中的空slice案例
2021/04/27 Golang
spring boot中nativeQuery的用法
2021/07/26 Java/Android
zabbix自定义监控nginx状态实现过程
2021/11/01 Servers
Windows server 2012 R2 安装IIS服务器
2022/04/29 Servers