3项目里面全局用less变量 cli vue_vue-cli3全局使用less变量（亲测有效）

问题： 在global.less文件中定义一些全局使用的less变量；

结果组件使用这些全局变量时，都要@import "[email protected]/styles/global.less"引入该文件,否则报错

解决方法和步骤

1. 安装style-resources-loader

yarn add style-resources-loader

2. 在vue.config.js中进行配置

module.exports = {

···

// 引入全局样式，这样使用定义的less变量时，不用每次引入global.less了

chainWebpack: config => {

const types = [‘vue-modules‘, ‘vue‘, ‘normal-modules‘, ‘normal‘]

types.forEach(type => addStyleResource(config.module.rule(‘less‘).oneOf(type)))

},

···

}

function addStyleResource(rule) {

rule.use(‘style-resource‘)

.loader(‘style-resources-loader‘)

.options({

patterns: [

path.resolve(__dirname, ‘./src/styles/global.less‘), // 需要全局导入的less

],

})

}

原文：https://www.cnblogs.com/XHappyness/p/12859422.html