LESS 是一种 CSS 预处理器，它允许开发者使用变量、函数、嵌套和混合等功能来扩展 CSS，提高 CSS 的可维护性和重用性。在前端开发中，使用 LESS 很常见，本文将介绍如何在 Webpack 中使用 LESS。
步骤
1. 安装依赖
首先需要安装两个依赖：less 和 less-loader。
npm install less less-loader --save-dev
2. 配置 Webpack
打开 webpack.config.js 文件，在 module 中添加以下代码：
-- -------------------- ---- -------
-
----- ----------
---- -
-
------- --------------
--
-
------- ------------
--
-
------- -------------
-
-
-这段代码表示如果遇到以 .less 结尾的文件，首先使用 style-loader 将样式插入到页面中，然后使用 css-loader 处理 CSS，最后使用 less-loader 编译 LESS。
3. 创建 LESS 文件
新建一个 LESS 文件，例如 test.less，并编写以下代码：
-- -------------------- ---- ------- --------------- -------- ---- - ----------------- --------------- ------- ----- ------ ----- -------- ---- ----- -------------- ---- -
这段代码定义了一个变量 @primary-color，然后在 .btn 类中使用该变量设置了背景颜色。
4. 引入 LESS 文件
在 HTML 文件中引入编译后的 CSS 文件，例如：
-- -------------------- ---- -------
--------- -----
------
------
-------------- ---- ---------------
----- ---------------- -------------------- --
-------
------
------- ----------------- -----------
-------
-------5. 运行 Webpack
运行以下命令：
npx webpack
Webpack 自动编译 LESS 文件，并生成 CSS 文件。
示例代码
本文的示例代码可以在 GitHub 上获取。
总结
本文介绍了如何在 Webpack 中使用 LESS，包括安装依赖、配置 Webpack、编写 LESS 文件、引入 LESS 文件和运行 Webpack 等步骤。通过本文的学习，读者可以了解如何在 Webpack 中使用 LESS 来扩展 CSS，提高 CSS 的可维护性和重用性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64577607968c7c53b0a27f38