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