Vue3+vite+element-plus修改主题颜色

怎么引入使用这边就不多说了

自定义element-plus主题色

1.在项目中安装sass 

npm install sass 

2.新建scss文件：src/styles/element/index.scss

// @/styles/element/index.scss
@forward "element-plus/theme-chalk/src/common/var.scss" with ($colors: (
        "primary": ("base": #0052D9),
        "success": ("base": #67c23a),
        "warning": ("base": #e6a23c),
        "danger": ("base": #E34D59),
        "error": ("base": #E34D59),
        "info": ("base": #E7E7E7),
    )
);

3.vite.config.js配置

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import * as path from 'path';

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import {createStyleImportPlugin, ElementPlusResolve } from 'vite-plugin-style-import';

// https://vitejs.dev/config/
export default defineConfig(({mode}) => {
  const config = loadEnv(mode, './')
  return {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src'),
        "_C":path.resolve(__dirname,"src/components"),
        "views": path.resolve(__dirname, "src/views")
      }
    },
    css: {
      preprocessorOptions: {
        scss: {
          // 自定义的主题色
          additionalData: `@use "@/styles/element/index.scss" as *;`,
        },
      },
    },
    plugins: [
      //配置自动导入element start
      createStyleImportPlugin({
        resolves: [ElementPlusResolve()],
        libs: [
          {
            libraryName: 'element-plus',
            esModule: true,
            resolveStyle: (name: string) => {
              return `element-plus/theme-chalk/${name}.css`
            },
          },
        ]
      }),
      //配置自动导入element end
      vue(),
      // 自动引入
      AutoImport({
        resolvers: [ElementPlusResolver({
          // 自动引入修改主题色添加这一行，使用预处理样式，不添加将会导致使用ElMessage，ElNotification等组件时默认的主题色会覆盖自定义的主题色
          importStyle: "sass",
        })],
      }),
      Components({
        resolvers: [ElementPlusResolver({
          // 自动引入修改主题色添加这一行，使用预处理样式
          importStyle: "sass",
        })],
      })
    ],
    server: {
      open: true,
      proxy: {
        '/api': {
          target: config.VITE_BASE_URL,
          changeOrigin: true,
          rewrite: (path) => path.replace(/\/api/, '') //正则匹配替换
        },
        '/uploads': {
          target: config.VITE_BASE_URL,
          changeOrigin: true,
          rewrite: (path) => path.replace(/\/uploads/, '') //正则匹配替换
        }
      },
      hmr: true,   // 热更新是否开启
    },
    build: {
      assetsDir: './static/front/'
    }
  }
})