落地qiankun的诸多问题----父子应用样式污染

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情

其他方案

qiankun官网提供的样式隔离的方案

1、配置 { sandbox : { strictStyleIsolation: true } } 的方式开启运行时的 scoped css 功能，实现形式为将整个子应用放到Shadow DOM内进行嵌入，完全隔离了主子应用。

缺点：很明显，子应用的弹窗、抽屉、popover等因找不到主应用的body会丢失或者样式不对；

2、添加experimentalStyleIsolation: true属性，实现形式类似于vue中style标签中的scoped属性，qiankun会自动为子应用所有的样式增加后缀标签，如：div[qiankun-child]

缺点：子应用的弹窗、抽屉、popover因插入到了主应用的body，所以导致样式丢失或应用了主应用了样式

最终还是放弃了官网的方法。

项目框架

主应用和子应用都是使用了vue框架

主应用使用了elementUI 2.x版本

子应用使用了elementUI plus版本

因为element-ui和element-plus前缀相同、命名规则相同，但内部html结构发生变化，从而导致子应用element-plus的样式会被污染。

原理

通过修改主应用elementUi的前缀来解决样式冲突问题

ps:修改子应用的也一样的道理

实现

需要安装这两个依赖

"change-prefix-loader": "^1.0.5",
"postcss-change-css-prefix": "^1.0.2"

在vue.config.js文件配置loader

chainWebpack: config => {
    config.module
      .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: 'parent-'
      })
      .end()
  }

根目录创建postcss.config.js文件，复制下面代码

const addCssPrefix = require('postcss-change-css-prefix')

module.exports = {
  plugins: [
    addCssPrefix({
      prefix: 'el-',
      replace: 'parent-'
    })
  ]
}

最后

项目已经上线了。 如果你也需要实现微应用父子应用样式隔离，可以尝试一下，如有问题可以找我。

接下来还会写一下其他问题的解决方案~

请期待