ElementPlus主题色修改

一般情况下我们使用elementplus的时候 肯定需要更改他的主题颜色，我们系统中的主题颜色大多数的时候适合他的主题颜色不一样的。
那么如何更改呢？
我是在assets/styles/element/index.scss下

@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': #427cff
    ),
    'success': (
      'base': #009817
    ),
    'warning': (
      'base': #e27d02
    ),
    'danger': (
      'base': #fb4a32
    ),
    'error': (
      'base': #ff5f5f
    ),
    'info': (
      'base': #65676f
    )
  ),
  $text-color: (
    'primary': #646a74,
    'regular': #edf3fc,
    'secondary': #333333,
    'placeholder': #9598a3,
    'disabled': #dcdee4
  ),
);

@use 'element-plus/theme-chalk/src/index.scss' as *;

想要全局使用的话，在vite.config.ts中

css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
          @use "@/assets/styles/element/index.scss" as *;
          `
      }
    }
}

解释：
@forward
  通过@forward加载一个模块的成员，并将这些成员当作自己的成员对外暴露出去，类似于类似于 es6 的 export …，通常用于跨多个文件组织 Sass 库
（相当于中转站，通过@forward引入scss文件并将引入scss文件中的变量、混合、函数等抛出，当其
他scss文件用@use引入此模块时可使用）

@use与@forward一起使用的情况
当一个模块里面须要同时使用@use与@forward时，先使用@forwar后再使用@use

@use
  注意：@use必须声明在其他代码之上
使用总结
@use引入同一个文件多次，不会重复引入，而@import会重复引入
@use引入的文件都是一个模块，默认以文件名作为模块名，可通过as alias取别名
@use引入多个文件时，每个文件都是单独的模块，相同变量名不会覆盖，通过模块名访问，而 @import变量会被覆盖
@use方式可通过 @use ‘xxx’ as *来取消命名空间，建议不要这么做
@use模块内可通过− 或 - 或−或来定义私有成员，也就是说或者-开头的Variables mixins functions 不会被引入
@use模块内变量可通过！default 定义默认值，引入时可通用with（…）的方式修改
可定义-index.scss或_index.scss来合并多个scss文件，它@use默认加载文件

参考链接