vue cli3 使用less变量（Variable xxx is undefined）

less、less-loader的版本号不同，会报奇怪的错误
最终！我选用的版本 [email protected]、[email protected]

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

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

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

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

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

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

怎么样才能正常使用呢？

五、 安装 style-resources-loader

npm i style-resources-loader

六、 在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

七、然后重启项目 npm run dev，发现可以正常使用了

less变量的情况，我一般用于全局定义几个常用的色值，组件中拿变量使用
这样后期维护起来，只需要去修改定义的地方即可。还是很方便的~