vue配置全局样式

配置全局样式后，每个组件都可以直接使用全局样式表中的内容，无需再单独引入。

方式一

1、安装依赖

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: 'scss',
      // 这三种 patterns 写法都是可以的，这里的路径不能使用 @ 符号
      // patterns: ["./src/styles/base.scss", "./src/styles/base2.scss"]
      // patterns: "./src/styles/base.scss"
      patterns: [
        path.resolve(__dirname, 'src/styles/base.scss'),
      ],
    },
  },
}

方式二

1、安装依赖

npm i style-resources-loader

2、配置vue.config.js

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