LESS 是一种动态样式语言，它可以扩展 CSS 语言，包括变量、混入、函数等等。它在前端开发中广泛应用于样式的编写（如 Bootstrap 4 中就使用了 LESS）。而 LESS-Loader 是 Webpack 中的一个 loader，它可以将 LESS 文件编译成 CSS 文件，同时也支持一些 options 的设置来满足我们的需求。
本文将会介绍 LESS-Loader 中一些常用的 options 以及它们的含义和使用方法。
引入 LESS-Loader
在使用 LESS-Loader 之前，需要先安装相应的依赖，使用 npm 直接进行安装。
npm install less less-loader --save-dev
这里安装了 less 和 less-loader，其中 less 是 LESS 的编译器，而 less-loader 则是一个 LESS 文件的 loader。
在 Webpack 的配置文件中引入 less-loader：
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ --
----- ----------
---- -
---------------
-------------
--------------
--
---
--
--这里使用了 style-loader、css-loader 和 less-loader 进行 LESS 文件的编译和样式插入。
常用 Options
lessOptions
lessOptions 可以用来设置 LESS 的编译选项，这个选项是传递给 LESS 编译器的参数。
sourceMap
如果你经常调试 CSS 样式，使用 SourceMap 可以极大地方便你的工作，它使得你在浏览器中查看样式代码时能够很方便地找到它在 LESS 文件中的位置。
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ --
----- ----------
---- -
---------------
-
------- -------------
-------- -
-- ------ ---------
---------- -----
--
--
-
------- --------------
-------- -
-- ------ ---------
---------- -----
--
--
--
---
--
--其中 sourceMap 选项需要在 css-loader 和 less-loader 中都进行设置。
modifyVars
modifyVars 可以用来在 LESS 文件中定义变量，它对应一个对象，对象的键代表 LESS 中定义的变量名，值代表它的值。
// variables.less @primary-color: #1890ff;
// index.less
@import "variables.less";
h1 {
color: @primary-color;
}可以通过 lessOptions 设置 modifyVars，然后在 LESS 文件中直接使用变量名。
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ --
----- ----------
---- -
---------------
-
------- -------------
-------- -
-------- -----
--
--
-
------- --------------
-------- -
-- ------ ---------
------------ -
----------- -
---------------- ----------
--
--
--
--
--
---
--
--prependData
prependData 可以用来向 LESS 文件中添加额外的内容，它对应一个字符串，这个字符串将会在 LESS 文件的开头添加。
这个选项可以用来向 LESS 文件中添加全局样式、全局变量等等。
// variables.less @primary-color: green;
// index.less
@import "variables.less";
h1 {
color: @primary-color;
}-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ --
----- ----------
---- -
---------------
-
------- -------------
-------- -
-------- -----
--
--
-
------- --------------
-------- -
-- ------- ----
------------ -------- -------------------
--
--
--
---
--
--在这个示例中，我使用了 prependData 将 variables.less 文件的内容添加进了 index.less 文件中。
总结
LESS-Loader 中有很多选项，它们可以用来满足我们不同的需求。本文介绍了其中常用的两个选项 lessOptions 和 prependData，它们分别可以用来设置 LESS 的编译选项和向 LESS 文件中添加全局样式和变量。
如果你想了解更多的选项以及它们的使用方法，你可以查看官方文档。
示例代码：
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ --
----- ----------
---- -
---------------
-
------- -------------
-------- -
-------- -----
--
--
-
------- --------------
-------- -
-- ------ ---------
------------ -
----------- -
---------------- ----------
--
--
-- ------- ----
------------ -------- -------------------
--
--
--
---
--
--来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b6fd25add4f0e0fff99f81