vue-cli3全局使用less变量（亲测有效）

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

结果组件使用这些全局变量时，都要@import "~@/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
			],
		})
}

vue-cli3全局使用less变量（亲测有效）

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