Element Plus 自定义主题颜色

主要步骤

element plus 快速开始官方指南。

首先使用 vite 创建一个 vue3 项目，请参考以往文章，不在赘述。

安装 element-plus

npm install element-plus --save

安装 unplugin-vue-components、unplugin-auto-import、sass

npm install -D unplugin-vue-components unplugin-auto-import sass

新建一个样式文件，覆盖 Element Plus 的 scss 变量。

// src/styles/element/index.scss
/* 只需要重写你需要的即可 */
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': green,
    ),
  ),
);

// 如果只是按需导入，则可以忽略以下内容。
// 如果你想导入所有样式:
@use 'element-plus/theme-chalk/src/index.scss' as *;

在 main.js 引入 scss 变量

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

import ElementPlus from 'element-plus'
// import 'element-plus/dist/index.css'

// 引入样式文件
import './styles/element/index.scss'

createApp(App).use(ElementPlus).mount('#app')

修改 vite.config.js

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'
import path from 'path'

const pathSrc = path.resolve(__dirname, 'src')

// https://vitejs.dev/config/
export default defineConfig({
    resolve: {
        alias: {
            '~/': `${pathSrc}/`,
        },
    },
    css: {
        preprocessorOptions: {
            scss: {
                // 如果在 main 入口文件引入了 '/styles/element/index.scss'
                // 就不需要为每个样式内容注入额外代码，请注释下面的内容
                // additionalData: `@use "~/styles/element/index.scss" as *;`,
            },
        },
    },
    plugins: [
        vue(),
        AutoImport({
            resolvers: [
                ElementPlusResolver({
                    importStyle: "sass",
                })
            ],
        }),
        Components({
            resolvers: [
                ElementPlusResolver({
                    importStyle: 'sass',
                }),
            ],
        }),
    ],

})