Vue 配置全局样式（style-resources-loader）两种方式配置

一、新建一个全局样式

新建一个全局样式variable.less文件,放在src/assets/css/variable.less

@charset"UTF-8";
@primary-color: #08b5a7;
@primary-bg: #08b5a710;
@orange-color: #ff9800;
......

二、安装插件，全局引入

方式一

1、安装 style-resources-loader 、 vue-cli-plugin-style-resources-loader

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

2、创建 vue.config.js，加入下面的配置

const path = require('path');
module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      // 这三种 patterns 写法都是可以的，这里的路径不能使用 @ 符号
      // patterns: ["./src/assets/reset1.less", "./src/assets/reset2.less"]
      // patterns: "./src/assets/reset.less"
	  patterns: [
        path.resolve(__dirname, './src/assets/reset.less')//这里的路径不能使用 @ 符号，否则会报错
      ]
    }
  }
}

方式二

1、安装 style-resources-loader

npm i style-resources-loader

2、创建 vue.config.js，加入下面的配置

const path = require('path');
module.exports = {
  chainWebpack: (config) => {
    const oneOfsMap = config.module.rule("less").oneOfs.store;
    oneOfsMap.forEach(item => {
      item
        .use("style-resources-loader")
        .loader("style-resources-loader")
        .options({
          patterns: [
	        path.resolve(__dirname, './src/assets/reset.less')
	      ]
        })
        .end()
    })
  }
};

三、在vue文件使用

&.active{
    color: @orange-color;
    .num-icon{
        color: #fff;
        border-color: @primary-color;
        background-color: @primary-bg;
    }
 }