Element Plus 主题配置步骤
参考官方文档
1. 安装 Sass 预处理器
npm i sass -D
2. 创建 Element Plus 主题样式文件
在 src/styles/element.scss 中配置主题变量：
/* just override what you need */
@forward "element-plus/theme-chalk/src/common/var.scss" with ($colors: ("primary": ("base": #c91830,),)
);// 如果你想导入所有样式:
// @use "element-plus/theme-chalk/src/index.scss" as *;
3. 配置 unplugin-vue-components 自动导入
在 vite.config.js 中配置 Element Plus 组件解析器，设置样式导入方式为 sass：
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'export default defineConfig({plugins: [Components({resolvers: [ElementPlusResolver({importStyle: "sass"})],}),],
})
4. 配置 Vite CSS 预处理器选项
在 vite.config.js 中添加 CSS 预处理器配置，让所有 scss 文件自动导入 Element Plus 主题变量：
export default defineConfig({css: {preprocessorOptions: {scss: {additionalData: `@use "@/styles/element.scss" as *;`,},},},
})
5. 完整 vite.config.js 配置示例
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { resolve } from "path";
import tailwindcss from "@tailwindcss/vite";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";export default defineConfig({plugins: [vue(),tailwindcss(),AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver({ importStyle: "sass" })],}),],css: {preprocessorOptions: {scss: {additionalData: `@use "@/styles/element.scss" as *;`,},},},resolve: {alias: [{find: "@",replacement: resolve(__dirname, "src"),},],},
});
6. 使用说明
配置完成后，你可以：
- 在组件中使用 Element Plus 组件，无需手动导入样式
- 通过修改
element.scss中的变量来自定义主题色 - 在其他 scss 文件中直接使用 Element Plus 的 CSS 变量
注意事项
- 确保
sass已安装为开发依赖 @use语法是 Sass 的现代导入方式，推荐使用additionalData会自动注入到每个 scss 文件的开头- 如果只需要按需导入样式，可以注释掉
element.scss中的全局导入语句
常见问题
Q: 为什么需要配置 importStyle: "sass"？
A: 让 unplugin-vue-components 在自动导入组件时使用 Sass 版本的样式文件，而不是默认的 CSS 文件，这样可以更好地进行主题定制。
Q: additionalData 的作用是什么？
A: 它会在每个 scss 文件的开头自动注入指定的代码，这里用来全局导入 Element Plus 的主题变量文件。
Q: 如何自定义更多主题颜色？
A: 在 element.scss 中修改 $colors 对象，添加更多颜色定义：
@forward "element-plus/theme-chalk/src/common/var.scss" with ($colors: ("primary": ("base": #c91830,),"success": ("base": #67c23a,),"warning": ("base": #e6a23c,),)
);