qiankun2 基座使用的vue3+elementplus 子应用是vue2+elementui会出现大量的样式冲突开起沙盒的两种隔离方式也没有用

[fm938]

提问之前强烈建立您能先阅读一下《如何正确的提出一个 Issue》

What happens?

最小可复现仓库

为节约大家的时间，无复现步骤的 ISSUE 会被关闭，提供之后再 REOPEN

复现步骤，错误日志以及相关配置

相关环境信息

• qiankun 版本
• 浏览器版本：
• 操作系统：

[scrushy]

同

[fm938]

我目前是在主应用index.html中CDN引入elementui的css文件可以解决大部分样式问题

[liuye1296]

css 沙箱是隔离子应用之间的css 问题 并不是用来解决父子应用之间的隔离的 https://qiankun.umijs.org/zh/faq#%E5%A6%82%E4%BD%95%E7%A1%AE%E4%BF%9D%E4%B8%BB%E5%BA%94%E7%94%A8%E8%B7%9F%E5%BE%AE%E5%BA%94%E7%94%A8%E4%B9%8B%E9%97%B4%E7%9A%84%E6%A0%B7%E5%BC%8F%E9%9A%94%E7%A6%BB

[humorHan]

楼主怎么解决的？

[huazaizhoujava]

我在使用qiankun2框架时，基座里elementUI也出现样式污染，我也想知道楼主是怎么解决的

[zxdvd]

现在elementplus支持自定义class的prefix了, 改prefix可以规避这个问题.

[Caveolaes]

有解决办法了么，大佬们

[Caveolaes]

我目前是在主应用index.html中CDN引入elementui的css文件可以解决大部分样式问题

el-select el-dialog脱离子应用的样式也可以么？

[fluoos]

很多内嵌样式会进入进入沙箱影响运行，可能是router导致的

[Lzp0225]

我的做法是修改el-前缀去避免样式冲突 npm i change-prefix-loader npm i postcss-change-css-prefix

vue.config.js: config.module // 修改el前缀 .rule('change-prefix') .test(/.js$/) .include.add(path.resolve(__dirname, './node_modules/element-ui/lib')) .end() .use('change-prefix') .loader('change-prefix-loader') .options({ prefix: 'el-', replace: 'customEl-', }) .end()

项目根目录下创建postcss.config.js文件： const addCssPrefix = require('postcss-change-css-prefix')

/** 匹配el-前缀的css样式 将其替换为自定义前缀 */ module.exports = { plugins: [ addCssPrefix({ prefix: 'el-', replace: 'customEl-', }), ], }