ElementPlus主题色配置不生效问题

关于Element-Plus主题色配置

🐉背景介绍

近期个人在研究Typescript知识，就想着使用Vue3搭建一个项目，使用ElementPlus作为样式库。在Vue2的ElementUI支持自定义主题，也想使用自己喜欢的颜色，需要覆盖掉原UI的主题色而引发的一些列坑。也查看了很多博主写的，估计是没怎么描述清楚，折腾了半天，最终折腾出来了。

PS:前提是同样使用的是Sass预编译器，Vite搭建的项目，Webpack搭建大同小异。

🐉自定义变量覆盖原来样式

参考官方给出的样例，需要注意的问题点，也给标注出来。

// styles/element/index.scss
/* 只需要重写你需要的即可 */
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': green,
    ),
  ),
);
// 如果只是按需导入，则可以忽略以下内容
// 如果你想导入所有样式: 
ps:要写这个，就是在入口文件注入的方式否则使用上面的方式进行修改
// @use "element-plus/theme-chalk/src/index.scss" as *;

🐉注入样式

从官网的上面，明显感觉到有点问题，可能稍微不注意就有问题，这里需要注意一下几个点。

🐎全局注入

import { createApp } from 'vue'
import './styles/element/index.scss'
import ElementPlus from 'element-plus'
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)
// 官方给出这个，是全局使用的方式，就相当于默认导入，这种可能后期会增加包体积问题，这里可以参考。 这种方式直接使用没有问题，切需要注意在vite.config.ts中没有任何关于这块的配置。

🐎Vite方式

// vite.config.ts
import {
    defineConfig } from 'vite'
import vue from