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版本太低了,更新下,升级下就好了。

相关推荐
零點壹度ideality5 分钟前
鸿蒙实现可以上下左右滑动的表格-摆脱大量ListScroller
前端·harmonyos
林希_Rachel_傻希希8 分钟前
this 的指向与 bind() 方法详解
前端·javascript
Komorebi゛9 分钟前
【Vue3】使用websocket实现前后端实时更新数据
前端·websocket
想要狠赚笔的小燕10 分钟前
老项目救星:Vue3/Vite/JS 项目渐进式引入「代码 + Commit」自动化规范全指南(多人协作)
前端·vue.js
用户3521201956016 分钟前
React-router v7(下)
前端
枫,为落叶16 分钟前
【vue】设置时间格式
前端·javascript·vue.js
郝学胜-神的一滴38 分钟前
Linux系统函数link、unlink与dentry的关系及使用注意事项
linux·运维·服务器·开发语言·前端·c++
昔人'1 小时前
css`text-wrap:pretty`
前端·css
勇敢di牛牛1 小时前
Vue+mockjs+Axios 案例实践
前端·javascript·vue.js
詩句☾⋆᭄南笙1 小时前
HTML列表、表格和表单
服务器·前端·html·表格·列表·表单