vue vue-cli3中使用全局less文件

全局less文件直接在main.js里面导入是没有效果的，刚开始在网上找了很多方法都是在 build / utils 文件里面改，但是vue-cli 3.x构建的项目里没有这个文件夹。。

但其实在官网里也有解决方法的

vue-cli3.x 导入全局.less文件

1. 进入项目，安装 style-resources-loader

npm i style-resources-loader -S 

2. 在 vue.config.js 文件里面添加以下代码，如果没有此文件则自己在根目录新建一个（与package.json 同级）

const path = require('path')
module.exports = {
	chainWebpack: config => {
		const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
		types.forEach(type => addStyleResource(config.module.rule('less').oneOf(type)))
	},
	css: {
		loaderOptions: {
			less: {
				javascriptEnabled: true
			}
		}
	}
}
function addStyleResource(rule) {
	rule.use('style-resource')
	.loader('style-resources-loader')
	.options({
		patterns: [
			// 需要全局导入的less路径，自己修改，我这里引入了两个less文件
			path.resolve(__dirname, './src/assets/css/global.less'),
			path.resolve(__dirname, './src/assets/css/variables.less')
		],
	})
}

3. 完成，修改后需要重新 run 一下项目才能起效果
4. 具体更多信息，可以去查看Cli官方文档，在Vue Cli \ 开发 \ CSS相关 \ 预处理器 \ 自动化导入 -> 传送门