vue3中修改element plus 主题色

1. 使用 :root 方式设置变量进行覆盖

• 文件夹 styles 下新建一个 element-variarbles.scss文件
  :root {
  --el-color-primary: red;
  }

• main 文件中引入
  import 'element-plus/dist/index.css'
  import '@/styles/element-variables.scss'

2. 使用 scss 覆盖
   即使用新写的样式，覆盖原有的样式，合并为一个scss文件，引入使用

• 文件夹 styles 下新建一个 element-variarbles.scss文件
  @forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
  'primary': (
  'base': red,
  ),
  "success": (
  "base": #67C23A,
  ),
  ),
  );
  @use "element-plus/theme-chalk/src/index.scss" as *; // 如果想要引入所有的样式

• vue.config.ts 中引入
  css: {
  loaderOptions: {
  sass: {
  additionalData: @use "@/styles/element-variables.scss" as *;
  },
  },
  },