elementPlus+vite 定制化主题色

导读：在使用elementPlus组件库的过程中，可以自定义样式（比如主题色）修改默认样式，导入定制化样式文件进行样式覆盖

1、新建样式文件

1.1 新建 styles/element/index.scss 自定义项目主题色

// 重写项目主题色
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': #27ba9b,
    ),
    'success': (
      'base': #1dc779,
    ),
    'warning': (
      'base': #ffb302,
    ),
    'danger': (
      'base': #e26237,
    ),
    'error': (
      'base': #cf4444,
    ),
    'info': (
      'base': #909399,
    ),
  )
);

1.2 新建 styles/var.scss 变量文件

一些自定义的颜色变量

$xtxColor: #27ba9b;
$helpColor: #e26237;
$sucColor: #1dc779;
$warnColor: #ffb302;

1.3 新建 styles/common.scss 重置样式

// 重置样式
* {
  box-sizing: border-box;
}

// 其他默认样式

2、修改配置文件 vite.c