vue 配置全局样式（style-resources-loader）

style-resources-loader的两种方式

这里以 less 举例，新建一个 reset.less (文件名随意)，路径为 @/assets/reset.less

方式一

安装 style-resources-loader

npm i style-resources-loader

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

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

创建 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')//这里的路径不能使用 @ 符号，否则会报错
      ]
    }
  }
};

方式二

安装 style-resources-loader

npm i style-resources-loader

创建 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()
    })
  }
};