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',
        }),
      ]
})

评论

《 “Element Plus自定义命名空间” 》 有 5 条评论

  1. qiaolei2 的头像
    qiaolei2

    牛啊牛啊

  2. linyj15 的头像
    linyj15

    强啊强啊

  3. study 的头像
    study

    webpack的怎么搞啊,有地址吗老哥

    1. Allison 的头像

      我的webpack项目配置
      1. 创建 styles/element/index.scss
      2. 修改入口文件路径
      import ElementPlus from 'element-plus'
      import "@/styles/element/index.scss";

      3. ElConfigProvider包装根组件

  4. 开心博客 的头像

    感恩有你,已解决。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注