QianKun 解决element ui 和 element-plus 样式冲突

如果你使用qiankun 改在完应用存在  主应用vue2+element-ui. 子应用vue3+element-plus  存在element 样式冲突

由于element-ui 和 element-plus 前缀相同、命名规则相同,但内部部分样式实现方式不同,从而导致样式被污染,页面样式混乱。

 

1:自定义命名空间

element-plus默认命名空间为el,el会作为其编译后的class名及css前缀。支持自定义命名

1: app.vue  添加

2:创建 styles/element/index.scss

 

3: 在vite.config.js 中配置 

webpack的话。配置vue.config.js

 

 4:在main.js 中替换成自己修改过前缀的配置

 

 主子应用就显示正常

 

posted @ 2024-06-27 11:03  Gherardo  阅读(88)  评论(0编辑  收藏  举报