第五十一篇:webpack中的loader(二) --less-loader
2024-10-21 08:55:33
好家伙
先扩充一下知识点:
什么是.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文件了
结束
最新文章
- JavaScript中函数函数的定义与变量的声明<;基础知识一>;
- openfire 初始密码
- delete语句跑了3个小时分析以及关于并行的一些知识
- node与socket.io搭配小例子-转载
- [iOS-UI]给输入框添加清除按钮的代码
- Android四大组件之Activity(活动)及其布局的创建与加载布局
- OpenSSL - 文件和字符MD5加密实现
- CARP 使用笔记
- 转-Activity之间数据传递之Intent数据传递
- iOS Xcode8的适配
- 玩转HTML5移动页面(动效篇)
- [深入React] 9.小技巧
- CSS书写规范、顺序和命名规则
- A Game of Thrones(20) - Eddard
- [jbdj]SpringMVC框架(3)映射器
- JAVA基础知识总结:九
- ng-if ng-show ng-hide区别(面试题)
- 【转】C# 中Linq查询所有上级节点或所有下级节点
- 隐藏Spring Elements
- SpringMVC不能引入静态资源