背景：最近做一个管理平台，为了方便，我们使用了vue-element-admin，但是UI设计的整体主题是红色，为了方便维护和减轻其他页面的工作量，遂决定配置全局的一个样式覆盖原有的element样式。

1、全局组件样式，覆盖原有的element自带样式

（1）找到styles文件，新建一个custom-element文件夹，新建一个index.scss文件，引入需要的组件样式，最好是一个组件一个文件名

（2）将index.scss引入到styles/index.scss中，将styles/index.scss引入到main.js中，一定要放在element-ui自带的样式后面

2、全局变量控制颜色，便于后期维护和后期做换肤

在styles/variables.scss里声明变量

如何全局使用呢，一般来说，我们声明了scss变量，引用的时候需要将文件import，才能使用。

但其实可以通过添加插件，全局配置，即使不用引用也可以全局使用

引入插件：sass-resources-loader

npm install --save-dev sass-resources-loader

找到vue.config.js配置文件，在module.exports中添加如下代码，重启即可全局引用而不用import

css: {
    // 只有 *.module.[ext] 结尾的文件才会被视作 CSS Modules 模块，设置为false则会去掉.module
    requireModuleExtension: true,
    loaderOptions: {
      // 可全局使用 variables.scss 中的变量
      sass: {
        prependData: `@import "@/styles/variables.scss";`
      }
    }
  },