定制elementPlus主题

1.安装Scss

npm i scss -D

2.准备定制化样式文件

/* 只需要重写你需要的即可 */
@forward 'element-plus/theme-chalk/src/common/var.scss' with ($colors: ('white': #ffffff,'black': #000000,'primary': ('base': #27ba9b,),'success': ('base': #1dc779,),'warning': ('base': #ffb302,),'danger': ('base': #e26237,),'error': ('base': #f56c6c,),'info': ('base': #909399,),),
);

3.自动导入配置

1.配置elementPlus采用sass样式配色系统

2.自动导入定制化样式文件进行样式覆盖

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
//element-plus按需导入
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/
export default defineConfig({plugins: [AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [// 1.配置elementPlus采用sass样式配色系统ElementPlusResolver({importStyle:"sass"})],}),vue(),],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}},css: {preprocessorOptions: {scss: {// 2.自动导入定制化样式文件进行样式覆盖additionalData: `@use "@/styles/element/index.scss" as *;`,}}}
})