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 事件冒泡简介及应用
Jan 11 Javascript
jquery offset函数应用实例
Nov 14 Javascript
如何制作浮动广告 JavaScript制作浮动广告代码
Dec 30 Javascript
JavaScript Ajax Json实现上下级下拉框联动效果实例代码
Nov 23 Javascript
验证控件与Button的OnClientClick事件详细解析
Dec 04 Javascript
javascript动态判断html元素并执行不同的操作
Jun 16 Javascript
javascript 面向对象封装与继承
Nov 27 Javascript
Underscore.js常用方法总结
Feb 28 Javascript
jQuery实现根据类型自动显示和隐藏表单
Mar 18 Javascript
JavaScript实现QQ列表展开收缩扩展功能
Oct 30 Javascript
Element Input组件分析小结
Oct 11 Javascript
vue.js中ref和$refs的使用及示例讲解
Aug 14 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
神族 Protoss 剧情介绍
2020/03/14 星际争霸
PHP 5.0对象模型深度探索之属性和方法
2008/03/27 PHP
PHP实现上传图片到 zimg 服务器
2016/10/19 PHP
ThinkPHP 5.x远程命令执行漏洞复现
2019/09/23 PHP
jquery 简单导航实现代码
2009/09/11 Javascript
将input file的选择的文件清空的两种解决方案
2013/10/21 Javascript
解析jQueryEasyUI的使用
2016/11/22 Javascript
jQuery实现web页面樱花坠落的特效
2017/06/01 jQuery
移动端网页开发调试神器Eruda的介绍与使用技巧
2017/10/30 Javascript
详解为什么Vue中不要用index作为key(diff算法)
2020/04/04 Javascript
Node.js API详解之 Error模块用法实例分析
2020/05/14 Javascript
vue setInterval 定时器失效的解决方式
2020/07/30 Javascript
vue项目在线上服务器访问失败原因分析
2020/08/14 Javascript
Node在Controller层进行数据校验的过程详解
2020/08/28 Javascript
Python 除法小技巧
2008/09/06 Python
python通过smpt发送邮件的方法
2015/04/30 Python
python实现判断数组是否包含指定元素的方法
2015/07/15 Python
Python列表切片用法示例
2017/04/19 Python
Python中用字符串调用函数或方法示例代码
2017/08/04 Python
python爬虫 正则表达式使用技巧及爬取个人博客的实例讲解
2017/10/20 Python
python机器学习理论与实战(二)决策树
2018/01/19 Python
python XlsxWriter模块创建aexcel表格的实例讲解
2018/05/03 Python
python 借助numpy保存数据为csv格式的实现方法
2018/07/04 Python
python实现二级登陆菜单及安装过程
2019/06/21 Python
解决Python对齐文本字符串问题
2019/08/28 Python
基于python实现文件加密功能
2020/01/06 Python
pycharm设置python文件模板信息过程图解
2020/03/10 Python
python怎么判断模块安装完成
2020/06/19 Python
担保书怎么写
2014/04/01 职场文书
股东合作协议书范本
2014/04/14 职场文书
《夹竹桃》教学反思
2014/04/20 职场文书
知识竞赛拉拉队口号
2014/06/16 职场文书
政治学专业毕业生求职信
2014/08/11 职场文书
2020年个人安全保证书参考模板
2020/01/08 职场文书
总结高并发下Nginx性能如何优化
2021/11/01 Servers
css3 选择器
2022/05/11 HTML / CSS