标签：语言 less -- Less loader webpack 第五十一篇 CSS

好家伙

 

先扩充一下知识点:

什么是.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文件了

 

 

 

结束

 

标签：语言,less,--,Less,loader,webpack,第五十一篇,CSS
来源： https://www.cnblogs.com/FatTiger4399/p/15766348.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。