配置element-plus的自定义主题

1. 准备好自己的样式文件，可以写在例如styles/element/index.scss

 

/* 只需要重写你需要的即可 */
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
 $colors: (
   (
    'white': #ffffff,
    'black': #000000,
    'primary': (
    // 主色
      'base': #67c23a,
    ),
    'success': (
    // 成功色
      'base': #1dc779,
    ),
    'warning': (
    // 警告色
      'base': #e6a23c,
    ),
    'danger': (
    // 危险色
    'base': #e26237,
    ),
    'error': (
    // 错误色
   'base': #cf4444,
    ),
    'info': (
    // 信息色
      'base': #909399,
    ),
  )
  )
);

2. 如果是用vite就去更改vite.config.js配置文件

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

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'

// 按需引入element-plus
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import {ElementPlusResolver} from "unplugin-vue-components/resolvers";

//导入自定义样式主题
import ElementPlus from 'unplugin-element-plus/vite'


//使用自定义颜色样式表设置-start
// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        AutoImport({
            resolvers: [ElementPlusResolver()],
        }),
        Components({
            resolvers: [
                //采用sass配置颜色
                ElementPlusResolver({importStyle: "sass"})],

        }),

    ],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        }
    },
    css: {
        preprocessorOptions: {
            scss: {
                additionalData: `@use "@/styles/element/index.scss" as *;`,
            },
        },
    },
})

//使用自定义颜色样式表设置-end