前端工程化之：webpack3-6(css预编译器less)

本文主要是介绍前端工程化之：webpack3-6(css预编译器less)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、预编译器less

1.基本原理 

编写 css 时，受限于 css 语言本身，常常难以处理一些问题： 

• 重复的样式值：例如常用颜色、常用尺寸；
• 重复的代码段：例如绝对定位居中、清除浮动；
• 重复的嵌套书写。

由于官方迟迟不对 css 语言本身做出改进，一些第三方机构开始想办法来解决这些问题，其中一种方案，便是预编译器。

预编译器的原理很简单，即使用一种更加优雅的方式来书写样式代码，通过一个编译器，将其转换为可被浏览器识别的传统 css 代码。

目前，最流行的预编译器有 less 和 sass 。

less官网：http://lesscss.org/
less中文文档1（非官方）：http://lesscss.cn/
less中文文档2（非官方）：https://less.bootcss.com/
sass官网：https://sass-lang.com/
sass中文文档1（非官方）：https://www.sass.hk/
sass中文文档2（非官方）：https://sass.bootcss.com/

2.less的安装与使用

前端工程化之：CSS工程化+Less

3.webpack中使用 less 

module.exports = {mode: "development",devServer: {open: true},module: {rules: [{ test: /\.css$/, use: ["style-loader", "css-loader"] },{ test: /\.less$/, use: ["style-loader", "css-loader?modules", "less-loader"]},]}
}

这篇关于前端工程化之：webpack3-6(css预编译器less)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---