vue3 + vite 项目搭建 - 修改ElementPlus主题

elemntPlus的主题变量本来时延用2.0版本的，所以文档也是和2.0很相似，但是根据文档去修改主题色已经不生效了，看了下主题变量代码，发现已经更换了新的写法，去查看更新日志也有更新记录，可能是对应的主题文档没有来得及更新把，也可能是我的使用姿势有误。。。
首先自定义一个变量文件，并在main.ts中引入

// elementPlus.scss
/* 改变主题色变量 */ $--color-primary: teal; /* 改变 icon 字体路径变量，必需 */
$--font-path: 'element-plus/lib/theme-chalk/fonts';
@import "node_modules/element-plus/packages/theme-chalk/src/index";

// main.ts
import '@/vab/elementPlus.scss'

上面的代码是官方文档提供的，但是并没有生效，在依赖中打开这个路径 node_modules/element-plus/packages/theme-chalk/src/common/var.scss 可以看到，颜色都是基于$--color()这个变量的，所以我们尝试修改

@use "sass:math";
@use "sass:map";
$--colors: () !default;
$--colors: map.deep-merge(
                (
                        'white': #ffffff,
                        'black': #000000,
                        'primary': (
                                'base': teal,
                        ),
                        'success': (
                                'base': #67c23a,
                        ),
                        'warning': (
                                'base': #e6a23c,
                        ),
                        'danger': (
                                'base': #f56c6c,
                        ),
                        'error': (
                                'base': #f56c6c,
                        ),
                        'info': (
                                'base': #909399,
                        ),
                ),
                $--colors
);
$--font-path: 'element-plus/lib/theme-chalk/fonts';
@import "node_modules/element-plus/packages/theme-chalk/src/index";

这个时候，主题色就变成我们设置的值 teal 了，当然项目中还会有其他比如圆角、输入框高度等，可以根据需要自行添加