element-plus 自定义主题色配置实例

按需自定义主题色配置
Elbutton

安装完后，修改 vite.config.js 文件

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 第一种方法：使用 unplugin-vue-components
// import AutoImport from 'unplugin-auto-import/vite'
// import Components from 'unplugin-vue-components/vite'
// import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// 第二种方法：使用 unplugin-element-plus
 import ElementPlus from 'unplugin-element-plus/vite'
import path from 'path'

// https://vitejs.dev/config/
export default ({mode}) => defineConfig({
  plugins: [
    vue(),

    ElementPlus({
      useSource: true,
    }),
  ],
  resolve:{
    alias:{
      '~': path.resolve(__dirname, './'),
      '@':path.resolve(__dirname, 'src')
    },
    extensions: ['.vue','.js', '.jsx','json']
  },
  css: {
    preprocessorOptions: {
// 覆盖掉element-plus包中的主题变量文件
      scss: {
        additionalData: `@use "@/styles/element/index.scss" as *;`,
      },
    },
  }
})

main.js

import { createApp } from 'vue'
import { ElButton } from 'element-plus'

import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(ElButton)
app.use(router)
app.mount('#app')

新建文件src/styles/element/index.scss,需要替换的按钮背景代码如下

// styles/element/index.scss
/* just override what you need */
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    "primary": (
      "base": red
    ),
  ),
);

来源：
自定义主题