【VUE】ElementPlus之自定义主题样式和命名空间

关于ElementPlus的动态主题色调切换可以参阅《【VUE】ElementPlus之动态主题色调切换(Vue3 + Element Plus+Scss + Pinia)》

Element Plus 默认提供一套主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。
但是如果需要大规模替换样式，例如： 将主题颜色从蓝色改为橙色或绿色，也许一个个将其覆盖起来不是一个好主意。

Element Plus 提供的默认命名空间为 el。 在特殊情况下，我们需要自定义命名空间。

官方文档：

• 【Element Plus | 自定义主题】
• 【Element Plus | 自定义命名空间】

---

以下演示按照按需导入模式下进行

1、环境

• vue： ^3.3.4
• element-plus： ^2.3.9
• vite：^4.4.5

2、目录结构

|- public
|- src
   # ...
   |- styles # 新增目录包含以下文件
      |- element
         |- index.scss # 用于后续对element的专门样式配置入口
      |- base.scss # 用于项目全局的扩展
   # ...
|- vite.config.ts # or vite.config.js

3、SCSS自定义主题配置

3.1、安装相关依赖

npm install -D sass
# or
yarn add -D sass
# or
pnpm add -D sass

3.2、element/index.scss配置

/**
 * @link https://github.com/element-plus/element-plus/blob/dev/packages/theme-chalk/src/common/var.scss
 */
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': green,
    ),
  ),
);

3.3、base.scss配置

/**
 * 引入element自定义样式
 */
/* @use "element/index" as *; */
@forward "element/index";

3.4、vite.config.[ts|js]配置

以下方案二选一即可

3.4.1、方案一

该方案需要unplugin-auto-import、unplugin-vue-components依赖

依赖

npm install -D unplugin-auto-import unplugin-vue-components
# or
yarn add -D unplugin-auto-import unplugin-vue-components
# or
pnpm add -D unplugin-auto-import unplugin-vue-components

配置

// ...
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// ...

export default ()=>{
    const viteConfig:UserConfig = {
        // ...
        plugins: [
            // ...
            AutoImport({
                resolvers: [ElementPlusResolver({
					// 自动引入修改主题色添加这一行，使用预处理样式
					// 不添加将会导致使用ElMessage，ElNotification等组件时默认的主题色会覆盖自定义的主题色
					importStyle: "sass"
				})],
            }),
            Components({
                resolvers: [ElementPlusResolver({
                    // 按需引入修改主题色添加这一行，使用预处理样式
                    importStyle: "sass"
                })],
            }),
        ],
        // ...
        css: {
            preprocessorOptions: {
                scss: {
                    // 引入`base.scss`
                    additionalData: `@use "@/styles/base.scss" as *;`,
                },
            },
        },
        // ...
    };

    return defineConfig(viteConfig);
}

3.4.2、方案二

该方案需要unplugin-element-plus依赖

依赖

npm install -D unplugin-element-plus
# or
yarn add -D unplugin-element-plus
# or
pnpm add -D unplugin-element-plus

配置

// ...
import ElementPlus from 'unplugin-element-plus/vite'
// ...

export default ()=>{
    const viteConfig:UserConfig = {
        // ...
        plugins: [
            // ...
            ElementPlus({
		      useSource: true,
		    }),
        ],
        // ...
        css: {
            preprocessorOptions: {
                scss: {
                    // 引入`base.scss`
                    additionalData: `@use "@/styles/base.scss" as *;`,
                },
            },
        },
        // ...
    };

    return defineConfig(viteConfig);
}

ok，至此基本配置搞定，可以开始在element/index.scss中自定义需要的主题样式了

4、自定义命名空间配置

4.1、设置 SCSS 变量

打开src/styles/element/index.scss文件，在文件开头加入如下配置：

/**
 * 默认配置
 * @link https://github.com/element-plus/element-plus/blob/dev/packages/theme-chalk/src/mixins/config.scss
 */
@forward 'element-plus/theme-chalk/src/mixins/config.scss' with (
  	$namespace: 'custom-namespace-name'
);

$namespace的值根据自己需要修改

4.2、在App.vue中进行全局配置

官方文档： 【Element Plus | Config Provider 全局配置】

在App.vue中使用ElConfigProvider组件进行全局配置：

<!-- App.vue -->
<template>
  <el-config-provider namespace="custom-namespace-name">
    <!-- ... -->
  </el-config-provider>
</template>

namespace属性的值根据自己需要修改

ps： $namespace和namespace需要保持一致