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实现禁止后退的方法
Dec 27 Javascript
深入理解javascript动态插入技术
Nov 12 Javascript
浅析jQuery(function(){})与(function(){})(jQuery)之间的区别
Jan 09 Javascript
将中国标准时间转换成标准格式的代码
Mar 20 Javascript
JavaScript把数组作为堆栈使用的方法
Mar 20 Javascript
jquery实现从数组移除指定的值
Jun 24 Javascript
简单的JS轮播图代码
Jul 18 Javascript
详解js静态资源文件请求的处理
Aug 01 Javascript
BootStrap入门学习第一篇
Aug 28 Javascript
红黑树的插入详解及Javascript实现方法示例
Mar 26 Javascript
vue 组件中添加样式不生效的解决方法
Jul 06 Javascript
JavaScript禁用右键单击优缺点分析
Jan 20 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
php更新mysql后获取改变行数的方法
2014/12/25 PHP
避免Smarty与CSS语法冲突的方法
2015/03/02 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
PHP抽象类和接口用法实例详解
2019/07/20 PHP
lib.utf.js
2007/08/21 Javascript
用Javascript实现Sleep暂停功能代码
2010/09/03 Javascript
javascript基础知识大集锦(二) 推荐收藏
2011/01/13 Javascript
关于jQuery参考实例 1.0 jQuery的哲学
2013/04/07 Javascript
介绍一个简单的JavaScript类框架
2015/06/24 Javascript
浅谈Angularjs link和compile的使用区别
2016/10/21 Javascript
新手学习前端之js模仿淘宝主页网站
2016/10/31 Javascript
Javascript中数组去重与拍平的方法示例
2017/02/03 Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
2017/04/20 Javascript
详解axios在vue中的简单配置与使用
2017/05/10 Javascript
jQuery实现弹幕特效
2019/11/29 jQuery
vue+vant 上传图片需要注意的地方
2021/01/03 Vue.js
[02:44]2014DOTA2 国际邀请赛中国区预选赛 大神红毯秀
2014/05/25 DOTA
复习Python中的字符串知识点
2015/04/14 Python
python实现寻找最长回文子序列的方法
2018/06/02 Python
mvc框架打造笔记之wsgi协议的优缺点以及接口实现
2018/08/01 Python
python实现停车管理系统
2018/11/30 Python
Python实现的简单线性回归算法实例分析
2018/12/26 Python
VSCode Python开发环境配置的详细步骤
2019/02/22 Python
Python多版本开发环境管理工具介绍
2019/07/03 Python
python的json中方法及jsonpath模块用法分析
2019/12/06 Python
python基于opencv检测程序运行效率
2019/12/28 Python
django实现日志按日期分割
2020/05/21 Python
John Varvatos官方网站:设计师男士时装
2017/02/08 全球购物
联想澳大利亚官网:Lenovo Australia
2018/01/18 全球购物
中专毕业自我鉴定
2013/10/16 职场文书
代领学位证书毕业证书委托书
2014/09/30 职场文书
公司离职证明标准范本
2014/10/05 职场文书
机关单位工作失职检讨书
2014/11/20 职场文书
工商局调档介绍信
2015/10/22 职场文书
Python安装使用Scrapy框架
2022/04/12 Python
Tomcat配置访问日志和线程数
2022/05/06 Servers