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

相关推荐
我要洋人死27 分钟前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人38 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人39 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR44 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香1 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596931 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai1 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_9151 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風6 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#