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

Myth丶恋晨 2022-09-13 01:59 264阅读 0赞

当有一个可在全局使用的公共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 依然没有任何效果

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`