在src/styles 目录下创建以下的样式文件：

.
├── index.scss 全局样式文件
├── mixin.scss 公共的 mixin 混入文件，用于保存复用样式
├── reset.scss 重置样式文件
└── variables.scss 样式变量文件

在variables.scss中添加以下样式变量，设置样式的时候可以直接使用，便于维护

// styles/variables.scss
$primary-color: #40586F;
$success-color: #51cf66;
$warning-color: #fcc419;
$danger-color: #ff6b6b;
$info-color: #868e96; // #22b8cf;

$body-bg: #E9EEF3; // #f5f5f9;
$sidebar-bg: #F8F9FB;
$navbar-bg: #F8F9FB;

$font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

在index.scss中添加全局样式

// styles/index.scss
@import './variables.scss';

// globals
html {
  font-family: $font-family;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  // better Font Rendering
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  background-color: $body-bg;
}

// custom element theme 更改 element 主题色
$--color-primary: $primary-color;
$--color-success: $success-color;
$--color-warning: $warning-color;
$--color-danger: $danger-color;
$--color-info: $info-color;
// change font path, required 改变 icon 字体路径变量，必需
$--font-path: '~element-ui/lib/theme-chalk/fonts';
// import element default theme 引入 element 默认主题文件（样式文件）
@import '~element-ui/packages/theme-chalk/src/index';
// node_modules/element-ui/packages/theme-chalk/src/common/var.scss

// overrides
// .el-menu-item, .el-submenu__title {
//   height: 50px;
//   line-height: 50px;
// }

.el-pagination {
  color: #868e96;
}

// components
.status {
  display: inline-block;
  cursor: pointer;
  width: .875rem;
  height: .875rem;
  vertical-align: middle;
  border-radius: 50%;

  &-primary {
    background: $--color-primary;
  }

  &-success {
    background: $--color-success;
  }

  &-warning {
    background: $--color-warning;
  }

  &-danger {
    background: $--color-danger;
  }

  &-info {
    background: $--color-info;
  }
}

详情参考element文档

然后在main.js入口文件中注释掉引入element主题文件的代码，引入自定义的全局样式文件

// 引入Element

import ElementUI from 'element-ui'

// 引入Element主题文件
// import 'element-ui/lib/theme-chalk/index.css'

// 引入自定义的全局样式文件
import './styles/index.scss'

共享全局样式变量

当我们需要在组件中使用variables.scss中定义的变量时，需要先引入文件，然后才能访问变量，如果每个组件都要使用的话就可以通过共享访问了
例如：在App.vue中根据样式变量进行颜色设置，~@ 代表src目录

• 由于css和scss的相对路径写法没有区别，如果要使用特殊写法，必须设置~
• @代表的是src目录，是webpack的别名，如果要在scss中使用，需要书写为~@

<!-- App.vue -->
<style lang="scss">
  @import '~@/styles/variables.scss';

  div {
    background-color: $success-color;
  }
</style>

如果其他的组件也需要操作，就可以配置VueCLI 向所有的Sass/Less样式传入共享的全局变量（参考Vue CLI文档）

• sass-loader文档：addtionalData
  • sass-loader v8指的是8.x版本，从9.x更新为了addtionalData，现在是10.x版本

    • 具体的版本应该查看package.json的版本信息再进行响应的配置

      
      sass8.x,所以应该使用名称prependData来设置，如下图
      

      在与package.json同级创建vue.config.js文件，并设置以下配置：

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      // 给 sass-loader 传递选项
      // 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效
      // 因为 `scss` 语法在内部也是由 sass-loader 处理的
      // 但是在配置 `prependData` 选项的时候
      // `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号
      // 在这种情况下，我们可以使用 `scss` 选项，对 `scss` 语法进行单独配置
      scss: {
        // additionalData: `@import "~@/variables.scss";`
        // 将路径修改为实际路径，添加 /styles 部分
        prependData: `@import "~@/styles/variables.scss";`
      }
    }
  }
};

全部设置完成之后，保存配置，重新启动serve就可以了