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 PeriodicalExecuter对象 学习
Jul 19 Javascript
Javascript图像处理—为矩阵添加常用方法
Dec 27 Javascript
js相册效果代码(点击创建即可)
Apr 16 Javascript
node.js中的events.emitter.once方法使用说明
Dec 10 Javascript
JavaScript实现的字符串replaceAll函数代码分享
Apr 02 Javascript
JavaScript解八皇后问题的方法总结
Jun 12 Javascript
AngularJS中一般函数参数传递用法分析
Nov 22 Javascript
详解jQuery的表单验证插件--Validation
Dec 21 Javascript
javascript显示系统当前时间代码
Dec 29 Javascript
详解Vue微信授权登录前后端分离较为优雅的解决方案
Jun 29 Javascript
vue组件之间数据传递的方法实例分析
Feb 12 Javascript
深入浅析nuxt.js基于ssh的vue通用框架
May 21 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
ThinkPHP视图查询详解
2014/06/30 PHP
PHP生成RSS文件类实例
2014/12/05 PHP
PHP程序员必须清楚的问题汇总
2014/12/18 PHP
php数组分页实现方法
2016/04/30 PHP
PHP 实现字符串翻转(包含中文汉字)的实现代码
2017/04/01 PHP
jQuery 渐变下拉菜单
2009/12/15 Javascript
js 如何实现对数据库的增删改查
2012/11/23 Javascript
深入理解Javascript作用域与变量提升
2013/12/09 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
2015/03/13 Javascript
在JavaScript中使用NaN值的方法
2015/06/05 Javascript
javascript新闻跑马灯实例代码
2020/07/29 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
2016/04/26 Javascript
canvas实现探照灯效果
2017/02/07 Javascript
利用vue.js插入dom节点的方法
2017/03/15 Javascript
JavaScript用二分法查找数据的实例代码
2017/06/17 Javascript
Element Input输入框的使用方法
2020/07/26 Javascript
python图像处理之镜像实现方法
2015/05/30 Python
python构建自定义回调函数详解
2017/06/20 Python
Python异常处理知识点总结
2019/02/18 Python
Python3.5基础之函数的定义与使用实例详解【参数、作用域、递归、重载等】
2019/04/26 Python
安装好Pycharm后如何配置Python解释器简易教程
2019/06/28 Python
Python 装饰器原理、定义与用法详解
2019/12/07 Python
Python描述数据结构学习之哈夫曼树篇
2020/09/07 Python
Python求区间正整数内所有素数之和的方法实例
2020/10/13 Python
纽约的奢华内衣店:Journelle
2016/07/29 全球购物
科颜氏美国官网:Kiehl’s美国
2017/01/31 全球购物
全球性的女装店:storets
2019/06/12 全球购物
澳大利亚波希米亚风时尚品牌:Tree of Life
2019/09/15 全球购物
浅谈react路由传参的几种方式
2021/03/23 Javascript
四个太阳教学反思
2014/02/01 职场文书
西式结婚主持词
2014/03/14 职场文书
党员一帮一活动总结
2014/07/08 职场文书
2016年感恩教师节校园广播稿
2015/12/18 职场文书
解读MySQL的客户端和服务端协议
2021/05/10 MySQL
Java框架入门之简单介绍SpringBoot框架
2021/06/18 Java/Android
JS 基本概念详细介绍
2021/10/16 Javascript