自定义Element-Plus主题颜色 覆盖原样式

基于Vue 3的组件库，通过Sass/SCSS来修改主题变量，从而实现自定义主题。以下是一个基本的步骤指南：

1、安装scss

npm i sass -D //-D表示添加依赖到开发者部分

2、准备定制样式文件

• 在‘style’文件夹下创建’var.scss’用于定义Sass变量（$xtxColor, $helpColor, $sucColor, $warnColor, $priceColor），每个变量都分配了一个特定的颜色值。

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

• 在‘style/element’文件夹下创建‘index.scss’用于覆盖原样式

@forward 'element-plus/theme-chalk/src/common/var.scss' 
with (
    $colors: (
        'primary':(
            //主色
            'base':#31ba27,
        ),
        'success':(
            //成功色
            'base':#1dc779,
        ),
        'warning':(
            //警告色
            'base':#ffb302,
        ),
        'danger':(
            //主色
            'base':#e26237,
        ),
        'error':(
            //主色
            'base':#cf4444,
        ),
    ),
);

3、覆盖ElementPlus样式

//vite.config.ts
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      //配置ElementPlus采用sass样式配色
      resolvers: [ElementPlusResolver({importStyle: 'sass'})],
    }),
  ],
  css:{
    preprocessorOptions: {//导入样式表
      scss:{
        additionalData:`
          @use "@/styles/element/index.scss" as *;
          @use "@/styles/var.scss" as *;
          `,
      }
  }},
  })

4、测试

//App.vue
<template>
  <el-button type="primary">测试按钮</el-button> //这里创建了一个按钮用于测试样式覆盖，在案例中，将“primary”的基本样式重新定义为了“'base':#31ba27,”
</template>

• 复制样式前
  
• 覆盖样式后