element-plus 自动引入修改主题色

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)

在线演示：我的项目