vue-cli3 如何全局引入less变量

Question

当有一个可在全局使用的公共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

我设置的变量是 BG 提示找不到这个变量

3:使用 下面 冯恒智 建议的方法


改写成less 结果无效
4:使用 globalVars
目前唯一成功的方法

但是感觉这样需要每次去vue.config.js里面去维护 有点不方法 有没有更好的办法

不知道如何写才能引入less的公共变量文件,
想要的效果是 在所有.vue文件里面 不用重复写 引入公共变量less文件
如果有知道怎么做的,麻烦指点一下 谢谢

Answer 1

我之前也遇到这个问题，你可能需要安装一个包就能使用变量
yarn add vue-cli-plugin-style-resources-loader

Answer 2

今天刚好也需要配置全局引入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') ]

Answer 3

如果是vue-cli3创建的项目
https://cli.vuejs.org/zh/guid...
或
https://www.npmjs.com/package...
下面这个方法似乎只对scss生效
https://cli.vuejs.org/zh/guid...

Answer 4

这篇总结了方法，也写了例子，你可以看看
https://blog.csdn.net/rudy_zh...

Answer 5

要在style里面@import

Answer 6

第一种方法在vue.cunfig.js中配置
const path = require("path");
module.exports = {
pluginOptions: {

'style-resources-loader': {
  preProcessor: 'less',
  patterns: path.resolve(__dirname, './src/common/less/variable.less')
}

}
}
测试没有报错

Answer 7

这样配，亲测有效

// 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
            }
        }
    }
}

Answer 8

修改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

---

跟楼主第一个方法一样，但是亲测有效，从项目中copy过来的。

Answer 9

和楼主一样的问题，试了上述方法，都不行，编译的时候一直都报less的变量undefined(组件中使用less的全局变量)

然后第二天重新试了一下~用vue create一个新项目中，依次安装less/less-loader/style-resources-loader/vue-cli-plugin-style-resources-loader

npm install less less-loader@5.0.0 --save-dev
npm install style-resources-loader vue-cli-plugin-style-resources-loader --save-dev

然后配置vue.config.js

const path = require('path')
module.exports = {
    pluginOptions: {
    "style-resources-loader": {
      preProcessor: "less",
      patterns: [path.resolve(__dirname, "./src/styles/全局less样式以及@变量.less")]
    }
  }
}

直接npm run serve

然后就好了~就好了~我勒个去~

唯一的问题是less-loader版本过高会报getOption异常，固定装个版本即可~
npm install less less-loader@5.0.0 --save-dev

在此记录下该问题
Mark一下

@vue/cli 4.5.13
less ^4.1.2
less-loader ^5.0.0
vue-cli-plugin-style-resources-loader ^0.1.5
style-resources-loader ^1.5.0

之前也试了vue add style-resources-loader；完了安装不成功，还一堆报错~算了~这个方法有风险，删了node_modules包重新来过...

Answer 10

是否安装 vue-cli-plugin-style-resources-loader 是有区别的：

1.安装了 vue-cli-plugin-style-resources-loader 则需要配置在

const path = require('path')
module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      'preProcessor': 'stylus',
      'patterns': [
        path.resolve(__dirname, './src/styles/abstracts/*.styl'),
      ]
    }
  }
}

2.没有安装 vue-cli-plugin-style-resources-loader，则配置如下：

vue.config.js：

module.exports = {
  // 安装：style-resources-loader
  chainWebpack: (config) => {
    const oneOfsMap = config.module.rule("less").oneOfs.store;
    oneOfsMap.forEach(item => {
      item
        .use("style-resources-loader")
        .loader("style-resources-loader")
        .options({
          // 这里的路径不能使用 @ 符号，否则会报错
          // patterns: ["./src/assets/reset1.less", "./src/assets/reset2.less"]
          patterns: "./src/assets/reset.less"
        })
        .end()
    })
  }
};

webpack.config.js:

module.exports = {
    // ...
    module: {
        rules: [{
            test: /\.scss$/,
            use: ['style-loader', 'css-loader', 'sass-loader', {
                loader: 'style-resources-loader',
                options: {
                    patterns: [
                        './path/from/context/to/scss/variables/*.scss',
                        './path/from/context/to/scss/mixins/*.scss',
                    ]
                }
            }]
        }]
    },
    // ...
}

详见：
1.https://www.npmjs.com/package/style-resources-loader
2.https://www.npmjs.com/package/vue-cli-plugin-style-resources-...