1、如果是使用的vue3的话直接使用以下命令

vue add style-resources-loader  

当然前提是已经安装好了附属样式插件（例如 less、less-loader）
具体见 https://github.com/yenshih/style-resources-loader

2、在vue.config.js里进行配置

module.export = {
	pluginOptions: {
    	'style-resources-loader': {
      		preProcessor: 'less',
      		patterns: [
        	// 这个是加上自己的路径,不能使用(如下:alias)中配置的别名路径
        	path.resolve(__dirname, './src/style/vars.less')
      		]
    	}
	}
}

3、直接在样式中使用，就不需要在使用@import './xxx.less';了

vars.less

@color-btn-hover-bg: #44abe6; // 按钮悬浮颜色

login.vue

<style>
.btn:hover {
	color: @color-btn-hover-bg;
}
</style>

4、vue add pluginName 是vue-cli3提供的。vue add 是用yarn安装插件的， yarn源的问题有可能导致失败。如果安装失败的话，就采用以下命令

npm i style-resources-loader --s --D
npm i vue-cli-plugin-style-resources-loader --s --D