第五十一篇：webpack中的loader(二) --less-loader

好家伙

 

先扩充一下知识点:

什么是.less文件?

作为一名前端开发的同学，很多时候我们都无法避免地要去写大量的 CSS 代码，

而且耗费的时间还不少，所以学习一种能够提升开发效率的 CSS 预处理器是必不可少的

 

答:Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。

因为 Less 和 CSS 非常像，因此很容易学习。

而且 Less 仅对 CSS 语言增加了少许方便的扩展，这就是 Less 如此易学的原因之一

 

less是一门CSS预处理语言,它扩充了CSS语言,

增加了诸如变量.混合.函数等功能,让CSS更易维护.方便制作主题.扩充

 

1.打包处理less文件

1.1.安装

终端跑一下

npm install less-loader@10.0.1 less@4.1.1 -D

 

1.2.在webpack.config.js的module->rules数组中,添加loader规则如下:

module:{
       rules:[
                {  test:/\.less$/,use:['style-loader','css-loader','less-loader']  }  //从后往前调用
]
}    

 

1.3.index.js中引入

import './css/index.less'

 

搞定,重新打包,webpack可以处理less文件了

 

 

 

结束