vue3出来了，想尝鲜首先想到的依然是element。
一上来就遇到如何自定义主题色的问题。
element-plus官网给了两个示例，完整引入的和手动引入的，唯独缺了自动引入的。
整了好些天才整出来一个解决方法供大家参考，避免踩坑。
安装依赖
# sass npm install -D sass # element-plus官方文档中自动引入所需的两个依赖 npm install -D unplugin-vue-components unplugin-auto-import
打包工具
我使用的是vite，此处依然是以vite配置为例
开始
第一步、照着element-plus官网给的方法配置自动引入
附上官网地址element-plus按需导入官网示例
// vite.config.ts import AutoImport from 'unplugin-auto-import/vite' import Components from 'unplugin-vue-components/vite' import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' export default { plugins: [ // ... AutoImport({ resolvers: [ElementPlusResolver()], }), Components({ resolvers: [ElementPlusResolver()], }), ], }
第二步、配置自定义主题
依然附上官网地址element-plus修改主题色官网示例
增加了一个预处理样式的配置，以及导入时读取预处理配置
// vite.config.js import path from "path"; 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' // https://vitejs.dev/config/ export default defineConfig({ resolve: { alias: { // 配置资源路径 "@/": `${path.resolve(__dirname, "src")}/`, }, }, css: { preprocessorOptions: { scss: { // 自定义的主题色 additionalData: `@use "@/styles/element/index.scss" as *;`, }, }, }, plugins: [ vue(), // 自动引入 AutoImport({ resolvers: [ElementPlusResolver({ // 自动引入修改主题色添加这一行，使用预处理样式，不添加将会导致使用ElMessage，ElNotification等组件时默认的主题色会覆盖自定义的主题色 importStyle: "sass", })], }), Components({ resolvers: [ElementPlusResolver({ // 自动引入修改主题色添加这一行，使用预处理样式 importStyle: "sass", })], }) ], });
附上我的样式：
// @/styles/element/index.scss @forward "element-plus/theme-chalk/src/common/var.scss" with ( $colors: ( "primary": ( "base": #3F9A12, ), "success": ( "base": #67C23A, ), "warning": ( "base": #E6A23C, ), "danger": ( "base": #F56C6C, ), "error": ( "base": #F56C6C, ), "info": ( "base": #909399, ), ), $button-padding-horizontal: ( "default": 80px ) );
直接看结果
我的项目：v3-plus: vue3.x + element-plus项目，使用vite (gitee.com)
在线演示：我的项目
