美文网首页
qiankun 微应用处理样式隔离、冲突

qiankun 微应用处理样式隔离、冲突

作者: webmrxu | 来源:发表于2022-11-06 10:43 被阅读0次

    qiankun微应用中样式隔离处理方式,官方文档有有说到处理方式;
    一般在主应用中配置样式隔离:
    如何确保主应用跟微应用之间的样式隔离

    但很多情况往往不是很理想,例如说,主应用支持的浏览器版本低,无法开启官方的样式隔离处理方案;

    这样就只能在微应用(子应用)中进行处理样式隔离。

    想到的处理方式有两种:
    1、每个css都添加class前缀
    2、微应用打包为多应用,处理每个页面的样式兼容性,将影响降低到最小。

    每个css都添加class前缀

    如果所有的样式都用的是less或sass到是很好解决,网上能找到很多添加样式前缀的插件。如果用的是css 到比较麻烦。网上没有好用的插件,考虑自己写一个loader 插件对css添加class前缀对样式进行隔离。

    document.body

    有些框架的 modal弹窗组件,加了transfor 后,会将元素绑定到body上,导致样式隔离失效。这个并没有好的解决方案。只能是使用 spacename 隔离。

    相关文章

      网友评论

          本文标题:qiankun 微应用处理样式隔离、冲突

          本文链接:https://www.haomeiwen.com/subject/gxubtdtx.html