vue cli3 less 变量 undefinde 解决（Variable xxx is undefined）

vue cli3 初始化构建项目时，自定义选择使用 less 作为 css 预处理器之后，就会默认安装 less、less-loader，并且直接可以在组件中正常使用嵌套结构书写 css 了。

但是，当我们需要使用 less 变量时，比如下面的情况

1. 我新建了一个 common.less 文件，并在 main.js 中引入它：

2. common.less 中任意定义一个变量，比如：

3. 将组件中任意颜色值，修改为 @pink（对应左侧绿色字体）

4. 这时编译报错变量未定义：Variable @pink is undefined

怎么样才能正常使用呢？

5. 安装 style-resources-loader

<font style="color:#1F0909;">npm i style-resources-loader</font>

6. 在 vue.config.js（若没有该文件，在根目录下新建）中，增加下面的配置：

patterns 传入你要加载的含 less 变量的文件地址（相对路径）。可以传字符串，也可以传数组

const vueConfig = {
  // 加上以下的配置
  chainWebpack: (config) => {
    const oneOfsMap = config.module.rule("less").oneOfs.store;
    oneOfsMap.forEach((item) => {
      item
        .use("style-resources-loader")
        .loader("style-resources-loader")
        .options({
          // or an array : ["./path/to/vars.less", "./path/to/mixins.less"] 这里的路径不能使用@，否则会报错
          patterns: "./src/assets/css/common.less",
        })
        .end();
    });
  },
  // 其他配置...
};
module.exports = vueConfig;