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 相关文章推荐
js实现简单模态窗口,背景灰显
Nov 14 Javascript
一个JavaScript用逗号分割字符串实例
Sep 22 Javascript
javascript实现详细时间提醒信息效果的方法
Mar 11 Javascript
Underscore.js 1.3.3 中文注释翻译说明
Jun 25 Javascript
JS实现双击屏幕滚动效果代码
Oct 28 Javascript
JavaScript实现获取远程的html到当前页面中
Mar 26 Javascript
深入理解Commonjs规范及Node模块实现
May 17 Javascript
vue2实现可复用的轮播图carousel组件详解
Nov 27 Javascript
微信小程序实现手势图案锁屏功能
Jan 30 Javascript
Vue实现base64编码图片间的切换功能
Dec 04 Javascript
vue-cli3使用mock数据的方法分析
Mar 16 Javascript
vite2.0+vue3移动端项目实战详解
Mar 03 Vue.js
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中文字符截取防乱码
2008/03/28 PHP
PHP UTF8编码内的繁简转换类
2009/07/20 PHP
解析PHP中intval()等int转换时的意外异常情况
2013/06/21 PHP
ThinkPHP模版引擎之变量输出详解
2014/12/05 PHP
PHP模板引擎Smarty中变量的使用方法示例
2016/04/11 PHP
Yii2实现让关联字段支持搜索功能的方法
2016/08/10 PHP
php正则表达式基本知识与应用详解【经典教程】
2017/04/17 PHP
PHP设计模式之策略模式原理与用法实例分析
2019/04/04 PHP
ThinkPHP5.1框架页面跳转及修改跳转页面模版示例
2019/05/06 PHP
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/02/09 Javascript
JavaScript 入门·JavaScript 具有全范围的运算符
2007/10/01 Javascript
javascript cookie解码函数(兼容ff)
2008/03/17 Javascript
javascript当onmousedown、onmouseup、onclick同时应用于同一个标签节点Element
2010/01/05 Javascript
JavaScript SweetAlert插件实现超酷消息警告框
2016/01/28 Javascript
Javascript删除指定元素节点的方法
2016/06/21 Javascript
js 实现数值的千分位及保存小数方法(推荐)
2016/08/01 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
2016/08/11 Javascript
jQuery EasyUi 验证功能实例解析
2017/01/06 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
2017/05/08 Javascript
vue初始化动画加载的实例
2018/09/01 Javascript
Vue动态生成表格的行和列
2019/07/18 Javascript
详解uniapp的全局变量实现方式
2021/01/11 Javascript
Python实现选择排序
2017/06/04 Python
使用python Telnet远程登录执行程序的方法
2019/01/26 Python
python接口自动化(十七)--Json 数据处理---一次爬坑记(详解)
2019/04/18 Python
Django自定义模板过滤器和标签的实现方法
2019/08/21 Python
Python使用enumerate获取迭代元素下标
2020/02/03 Python
python GUI库图形界面开发之PyQt5布局控件QGridLayout详细使用方法与实例
2020/03/06 Python
python使用隐式循环快速求和的实现示例
2020/09/11 Python
浅析python 字典嵌套
2020/09/29 Python
毕业生就业自荐书
2013/12/15 职场文书
责任心演讲稿
2014/05/14 职场文书
2014年党建工作总结
2014/11/11 职场文书
2014年评职称工作总结
2014/11/20 职场文书
汶川大地震感悟
2015/08/10 职场文书
HTML实现仿Windows桌面主题特效的实现
2022/06/28 HTML / CSS