配置Element-Plus主题颜色

步骤一：

下载scss

在打开vue项目的编辑器中打开终端，或者在cmd窗口进入到项目目录下

用你的包管理器安装scss,例如使用npm包管理器：

npm i sass -D

ps:sass是管理scss文件的

步骤二：

准备定制样式文件

var.scss(定义你想要的颜色变量，都以字符$开头)，例如：

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

index.scss用来覆盖elementui的颜色样式，例如:

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

@forward 指令用于将一个或多个其他文件的内容合并到当前文件中，但不会在当前文件中直接包含被转发文件的样式。这使得 @forward 成为模块化 Sass 代码、创建可重用库以及组织大型项目时的一个有用工具。对于上述代码来说就是将var.scss合并到当前文件了

'primary':( //主色 'base':#27ba9b, )前面的primary对应的是elementui的样式名，其他也是，名字要与elementui一致才能覆盖

步骤三：

配置vite文件

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver({importStyle:"sass"})],
    }),
  ],
  css:{
    preprocessorOptions:{//导入样式表
      scss:{
        additionalData:`
        @use "@/styles/element/index.scss" as *;                 
        @use "@/styles/var.scss" as *;
`
      }
    }
  },
  resolve: {
    
  }
})

关键在于

 Components({
      resolvers: [ElementPlusResolver({importStyle:"sass"})],
    }),

接下来就可以测试样式了，比如页面有一个按钮：

<el-button type="primary"></el-button>

因为进行了上述配置，primary将不会显示elementui原有的颜色，而是显示十六进制为#27ba9b的颜色