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 相关文章推荐
$()JS小技巧
Jul 21 Javascript
子窗口、父窗口和Silverlight之间的相互调用
Aug 16 Javascript
js原生态函数中使用jQuery中的 $(this)无效的解决方法
May 25 Javascript
jquery 表格的增行删行实现思路
Mar 21 Javascript
jquery的父子兄弟节点查找示例代码
Mar 03 Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
Jun 05 Javascript
浅谈jquery的html方法里包含特殊字符的处理
Nov 30 Javascript
开源免费天气预报接口API及全国所有地区代码(国家气象局提供)
Dec 26 Javascript
使用 Javascript 实现浏览器推送提醒功能的示例
Nov 03 Javascript
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
javascript/jquery实现点击触发事件的方法分析
Nov 11 jQuery
微信小程序实现限制用户转发功能的实例代码
Feb 22 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
经典的星际争霸,满是回忆的BGM
2020/04/09 星际争霸
PHP中使用数组实现堆栈数据结构的代码
2012/02/05 PHP
php输出金字塔的2种实现方法
2014/12/16 PHP
标准PHP的AES加密算法类
2015/03/12 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
PHP分页显示的方法分析【附PHP通用分页类】
2018/05/10 PHP
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
2011/02/24 Javascript
你必须知道的Javascript知识点之&quot;this指针&quot;的应用
2013/04/23 Javascript
js处理表格对table进行修饰
2014/05/26 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
2015/12/08 Javascript
jQuery自定义滚动条完整实例
2016/01/08 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
2016/12/21 Javascript
nodejs+express实现文件上传下载管理网站
2017/03/15 NodeJs
详解js静态检查工具eslint配置文件
2018/11/23 Javascript
在Vue项目中用fullcalendar制作日程表的示例代码
2019/08/04 Javascript
在vue中实现给每个页面顶部设置title
2020/07/29 Javascript
[47:43]完美世界DOTA2联赛PWL S3 Magama vs GXR 第二场 12.19
2020/12/24 DOTA
Python牛刀小试密码爆破
2011/02/03 Python
详细介绍Python语言中的按位运算符
2013/11/26 Python
python有证书的加密解密实现方法
2014/11/19 Python
python实现网站的模拟登录
2016/01/04 Python
Python大数据之使用lxml库解析html网页文件示例
2019/11/16 Python
jupyter notebook清除输出方式
2020/04/10 Python
CSS3 实现穿梭星空动画
2020/11/13 HTML / CSS
不可轻视HTML5!App三年内将被html5顶替彻底消失
2015/11/18 HTML / CSS
美国现代家具和家居商店:Apt2B
2016/08/29 全球购物
英国Lookfantastic中文网站:护肤品美妆美发购物(英国直邮)
2020/04/27 全球购物
自动化工程专业个人应聘自荐信
2013/09/26 职场文书
青年志愿者事迹材料
2014/02/07 职场文书
本科生就业推荐信
2014/05/19 职场文书
计算机科学技术自荐信
2014/06/12 职场文书
2014年煤矿工作总结
2014/11/24 职场文书
2014年小学工作总结
2014/11/26 职场文书
2015年质量月活动总结报告
2015/03/27 职场文书
使用CSS3实现按钮悬停闪烁动态特效代码
2021/08/30 HTML / CSS
MySQL之select、distinct、limit的使用
2021/11/11 MySQL