关于less:vue-cli3-使用less变量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

npm i style-resources-loader

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

7. 而后重启我的项目 npm run dev，发现能够失常应用了

less 变量的状况，我个别用于全局定义几个罕用的色值，组件中拿变量应用，这样前期保护起来，只须要去批改定义的中央即可。还是很不便的~