element-plus 自定义命名空间 el-config-provider namespace 不起作用,html 的class值改变了,但是样式不对

今天按照文档,对elemen plus + vite 的项目,进行qiankun嵌套,发现子应用的element和主应用的element plus样式冲突,所以决定用element plus 的自定义命名空间处理下。

使用方法,按照文档来

第一步:vue文件内部添加自定义命名空间标签,自定义命名 ep

复制代码
<template>
  <el-config-provider namespace="ep">
    <!-- ... -->
  </el-config-provider>
</template>

第二步:修改 namespace的变量值,将下面的代码,添加到你的文件内部

复制代码
@forward 'element-plus/theme-chalk/src/mixins/config.scss' with (
  $namespace: 'ep'
);

第三步:将sass文件引入

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

文档到此结束。就是个大坑,结果就是,html变了,但是element css 的文件还是el-开头的,

所以还需要:替换element css 文件引入路径,我是再main.ts内引入的。

复制代码
import 'element-plus/theme-chalk/src/index.scss'

到此,算是成功了。

如果报错,math.div****之类的,那就是sass版本太低了,更新下,升级下就好了。

相关推荐
牧羊人_myr几秒前
Ajax 技术详解
前端
浩男孩10 分钟前
🍀封装个 Button 组件,使用 vitest 来测试一下
前端
蓝银草同学14 分钟前
阿里 Iconfont 项目丢失?手把手教你将已引用的 SVG 图标下载到本地
前端·icon
布列瑟农的星空24 分钟前
重学React —— React事件机制 vs 浏览器事件机制
前端
一小池勺1 小时前
CommonJS
前端·面试
孙牛牛1 小时前
实战分享:一招解决嵌套依赖版本失控问题,以 undici 为例
前端
用户52709648744901 小时前
Git 最佳实践
前端
星秀日1 小时前
JavaWeb--Ajax
前端·javascript·ajax
4_0_41 小时前
全栈视角:从零构建一个现代化的 Todo 应用
前端·node.js