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

相关推荐
Boilermaker19924 分钟前
【Java EE】SpringIoC
前端·数据库·spring
中微子15 分钟前
JavaScript 防抖与节流:从原理到实践的完整指南
前端·javascript
天天向上102430 分钟前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
芬兰y1 小时前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁1 小时前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
小蜜蜂dry1 小时前
Fetch 笔记
前端·javascript
拾光拾趣录1 小时前
列表分页中的快速翻页竞态问题
前端·javascript
小old弟1 小时前
vue3,你看setup设计详解,也是个人才
前端
Lefan1 小时前
一文了解什么是Dart
前端·flutter·dart
Patrick_Wilson1 小时前
青苔漫染待客迟
前端·设计模式·架构