Element Plus自定义命名空间

使用Vue 3 + Element Plus开发新项目时，因为要引入的公共组件是Vue 2 + Element UI实现的。同一个项目中既有Element UI，又有Element Plus，会造成CSS冲突。

官方给出的解决方案是给Element Plus修改命名空间，如：原来的都是el-开头，我们可以改成ep-开头。

• 使用 ElConfigProvider 包装您的根组件

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

• 在src目录下创建 styles/element/index.scss

// styles/element/index.scss
// we can add this to custom namespace, default is 'el'
@forward 'element-plus/theme-chalk/src/mixins/config.scss' with (
  $namespace: 'ep'
);
// ...

• 在 vite.config.ts 中导入 styles/element/index.scss

import { defineConfig } from 'vite'
// https://vitejs.dev/config/
export default defineConfig({
  // ...
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "~/styles/element/index.scss" as *;`,
      },
    },
  },
  // ...
})

完全按照教程在全新的项目中试验会发现虽然类名都变成ep-开头了，但是element 源码中的类依然是el-

原因：

1. 官方教程中使用了~别名，如果你在vite / webpack中没有配置～别名，自定义命名空间就不会生效
2. 如果是全部导入，需要在styles/element/index.scss中引入Element源码

// we can add this to custom namespace, default is 'el'
@forward "element-plus/theme-chalk/src/mixins/config.scss" with (
  $namespace: "ep"
);

@use "element-plus/theme-chalk/src/index.scss" as *;

注意：如果是按需导入组件，需要使用ElementPlusResolver，具体配置参考官方模版

import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

Components({
      resolvers: [
        ElementPlusResolver({
          importStyle: 'sass',
        }),
      ]
})