vue-cli构建项目使用 less的方法


Posted in Javascript onOctober 04, 2017

在vue-cli中构建的项目是可以使用less的,但是查看package.json可以发现,并没有less相关的插件,所以我们需要自行安装。

第一步:安装

npm install less less-loader --save-dev

即通过npm安装less和less-loader,并记录到devDependencies中,因为这是我们在开发中使用的而非在生产中使用,所以就不将之记录在 dependencies 中。

第二步:在配置文件中配置

实际上如果我们通过vue-cli来构建项目,这一步是可以省略的。

在webpack.dev.conf.js中,我们可以看到下面的代码:

module: {
  rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
 },

即webpack.dev.conf.js在合并了webpack.base.conf.js的基础上又添加了dev环境下的module。 

注意:在上面的代码中,我们还可以使用loaders来代替rules, 他们的含义是一样的。

在build文件夹下有一个utils.js文件,这个文件提供了一些通用的方法,供webpack.dev.conf.js和webpack.prod.conf.js使用。 其中styleLoaders方法如下:

// Generate loaders for standalone style files (outside of .vue)
exports.styleLoaders = function (options) {
 var output = []
 var loaders = exports.cssLoaders(options)
 for (var extension in loaders) {
  var loader = loaders[extension]
  output.push({
   test: new RegExp('\\.' + extension + '$'),
   use: loader
  })
 }
 return output
}

通过这个方法可以对大多数css预处理进行了配置,具体配置在cssLoaders方法中。

第三步:在单组件.vue中使用

如下所示:

<template>
 <div class="hello">
  <h2>{{msg}}</h2>
  <h2>Essential Links</h2>
  <ul>
   <li>Core Docs</li>
  </ul>
  <h2>Ecosystem</h2>
 </div>
</template>

<script>
export default {
 name: 'hello',
 data: function () {
  return {
   msg: "Welcome to your vue.js app"
  }
 }

}
</script>

<style scoped lang="less">
 .hello {
  color: red;
  font-size: 0.45rem;
  h2 {
   color: blue;
  }
 }
</style>

需要注意一下几点:

1.已经在webpack中配置了,所以这里不需要引入任何less文件。

2.在style中声明lang="less"。 注意: scoped的作用仅仅是限定css的作用域,防止变量污染。

3.这样就可以根据less的语法使用了。

补充:通过下面的代码就不难理解问什么scoped可以隔离作用域了。 即给不同组件的所有html添加一个属性,然后在css中使用属性选择器来防止作用域的污染,实在聪明!!!

vue-cli构建项目使用 less的方法

把scoped去掉之后,我们就可以发现已经没有额外的属性了: 

vue-cli构建项目使用 less的方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 解析读取XML文档 实例代码
Jul 07 Javascript
基于jquery的tab切换 js原理
Apr 01 Javascript
jQuery.buildFragment使用方法及思路分析
Jan 07 Javascript
循环 vs 递归浅谈
Feb 28 Javascript
21个JavaScript事件(Events)属性汇总
Dec 02 Javascript
Javascript中的arguments与重载介绍
Mar 15 Javascript
字符串反转_JavaScript
Apr 28 Javascript
jQuery图片渐变特效的简单实现
Jun 25 Javascript
JavaScript获取键盘按键的键码(参照表)
Jan 10 Javascript
node.js中express中间件body-parser的介绍与用法详解
May 23 Javascript
详解Vue的options
May 15 Vue.js
JS封装cavans多种滤镜组件
Feb 15 Javascript
浅谈Angular2 模块懒加载的方法
Oct 04 #Javascript
浅谈angular2路由预加载策略
Oct 04 #Javascript
浅谈Angular路由复用策略
Oct 04 #Javascript
React-Native之定时器Timer的实现代码
Oct 04 #Javascript
vuejs使用$emit和$on进行组件之间的传值的示例
Oct 04 #Javascript
无限循环轮播图之运动框架(原生JS实现)
Oct 01 #Javascript
原生JS实现图片无缝滚动方法(附带封装的运动框架)
Oct 01 #Javascript
You might like
Referer原理与图片防盗链实现方法详解
2019/07/03 PHP
如何通过Apache在本地配置多个虚拟主机
2020/07/29 PHP
DOM下的节点属性和操作小结
2009/05/14 Javascript
Mootools 1.2教程 选项卡效果(Tabs)
2009/09/15 Javascript
DIY jquery plugin - tabs标签切换实现代码
2010/12/11 Javascript
JS TextArea字符串长度限制代码集合
2012/10/31 Javascript
js新闻滚动 js如何实现新闻滚动效果
2013/01/07 Javascript
JS 各种网页尺寸判断实例方法
2013/04/18 Javascript
纯文字版返回顶端的js代码
2013/08/01 Javascript
JS保存和删除cookie操作 判断cookie是否存在
2013/11/13 Javascript
jQuery回调函数的定义及用法实例
2014/12/23 Javascript
JavaScript函数内部属性和函数方法实例详解
2016/03/17 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
2017/03/09 Javascript
Vue监听数据对象变化源码
2017/03/09 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
2017/06/19 Javascript
js 提取某()特殊字符串长度的实例
2017/12/06 Javascript
js阻止默认右键的下拉菜单方法
2018/01/02 Javascript
vue data有值,但是页面{{}} 取不到值的解决
2020/11/09 Javascript
Python科学画图代码分享
2017/11/29 Python
打包python 加icon 去掉cmd黑窗口方法
2019/06/24 Python
利用python实现短信和电话提醒功能的例子
2019/08/08 Python
使用Pandas的Series方法绘制图像教程
2019/12/04 Python
CSS3实现10种Loading效果
2016/07/11 HTML / CSS
HTML5新标签兼容——&gt; 的两种方法
2018/09/12 HTML / CSS
大码女装:Ulla Popken
2019/08/06 全球购物
求职简历中的自我评价分享
2013/12/08 职场文书
电大毕业生自我鉴定
2014/04/10 职场文书
淘宝活动总结范文
2014/06/26 职场文书
最新离婚协议书范本
2014/08/19 职场文书
群众路线教育实践活动方案
2014/10/31 职场文书
工作调动申请报告
2015/05/18 职场文书
副校长2015年教育教学工作总结
2015/07/27 职场文书
2016年校园社会综合治理宣传月活动总结
2016/03/16 职场文书
数据库的高级查询六:表连接查询:外连接(左外连接,右外连接,UNION关键字,连接中ON与WHERE的不同)
2021/04/05 MySQL
Nginx内网单机反向代理的实现
2021/11/07 Servers
mysql5.6主从搭建以及不同步问题详解
2021/12/04 MySQL