vue-cli3全局引入less变量报错：Variable @priceColor is undefined或Variable @BG is undefined

当有一个可在全局使用的公共less变量文件
variable.less
如何写才能一次性在所有.vue文件中引入这个文件?

我尝试了几种方法
1:安装style-resources-loader
然后配置

const path = require("path");

module.exports = {
  pluginOptions: {
    "style-resources-loader": {
      preProcessor: "less",
      patterns: [path.resolve(__dirname, "./src/assets/style/variable.less")]
    }
  }
};

使用后 没有任何效果
测试了 ./src @/src ~@/src 依然没有任何效果

使用后 没有任何效果
测试了 ./src @/src ~@/src 依然没有任何效果

2:在main.js中引入variable.less

这样确实可以获取到variable.less中的样式 但是变量拿不到
提示:Variable @BG is undefined

不知道如何写才能引入less的公共变量文件,
想要的效果是 在所有.vue文件里面 不用重复写 引入公共变量less文件

解决方案：yarn 添加安装包

yarn add vue-cli-plugin-style-resources-loader

今天刚好也需要配置全局引入less变量, 发现跟楼主一样的报错，开始以为是路径或者名字写错了，一直报错，代码跟上面的几位同行说的没错。
后来想重新安装一下style-resources-loader插件吧（第一次是使用npm i style-resources-loader -D），我是使用vue-cli3安装插件的方法就可以了。

vue add style-resources-loader

会自动安装好vue-cli-plugin-style-resources-loader的，一切没问题。
这样会自动生成如下代码：

pluginOptions: {
  'style-resources-loader': {
    preProcessor: 'less',
            patterns: []
  }
}

往里面配置路径，发现可以了

patterns: [path.resolve(__dirname, './src/assets/css/common.less') ]

---

···回复：

这样配，亲测有效

// vue.config.js
const path = require('path')
module.exports = {
    chainWebpack: config=> {
        config.module.rule('less').oneOf('vue').use('style-resource')
        .loader('style-resources-loader')
        .options({
            patterns: [
                path.resolve(__dirname, './src/assets/common.less'),
            ],
        })
    },
    css: {
        loaderOptions: {
            less: {
                javascriptEnabled: true
            }
        }
    }
}

---

···回复：

修改vue.config.js文件

module.exports = {
  ...
  // 全局less变量
  pluginOptions: {
    "style-resources-loader": {
      preProcessor: "less",
      patterns: [path.resolve(__dirname, "src/styles/global.less")]
    }
  }
};

src/styles/目录下global.less 文件

//common style
...
@color-blue:#2874C2;
@color-red:#FB0D1C;
@color-orange:#FF6C00;
@color-gray:#909090;
...

修改后重新编译
npm run serve or npm run dev