在前端开发过程中，我们经常会使用 less 来写样式。有时候，我们需要在 less 中定义一些变量来方便样式的重用，但是这些变量在编译后无法被普通的 less 文件引用。这时，就需要使用 less-vars-loader 这个 npm 包来实现。
less-vars-loader 简介
less-vars-loader 是一个 webpack 插件，用于将 less 变量文件通过 webpack 编译后输出为 js 模块。这样，我们就可以通过 import 的方式在 js 中引用这些变量，实现样式和 js 的共享。
安装
使用 npm 安装 less-vars-loader：
yarn add less-vars-loader
或者使用 npm：
npm install less-vars-loader
使用
在 webpack 配置文件中，添加如下配置：
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-
----- ----------
---- -
-
------- --------------
--
-
------- ------------
--
-
------- -------------
--
-
------- -------------------
-------- -
----- -
-- -- ---- --
----------------- ----------
---------------------- -----
-
-
-
-
-
-
-
-- ---
-以上配置中，我们在 less-loader 和 less-vars-loader 之间添加了一个 less 变量配置。在 options.vars 中定义的变量可以在 less 文件中直接使用。
示例代码：
// variables.less 文件
@import '~antd/lib/style/themes/default.less';
.example {
color: @primary-color;
border-radius: @border-radius-base;
}在 js 中引用这个 less 文件：
import './variables.less'; // ...
注意事项
- less-vars-loader 使用 less 变量文件中定义的变量时，要注意变量名的前缀，具体要根据 less 版本以及对应的 css 框架而定。
- 如示例代码中，我们使用了 antd 的主题变量，这时需要通过 tilde (~) 来引用 node_modules 目录下的 less 文件。
- 若需要动态改变变量值，可以在 js 中通过修改 window.lessVars 的值来实现。
小结
使用 less-vars-loader，可以方便地将 less 变量文件转换为 js 模块，实现样式和 js 的共享。通过本文的介绍和示例代码，相信读者已经对 less-vars-loader 有了初步的了解，也可以在实际项目中熟练地使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedabbdb5cbfe1ea0610833