qiankun微应用中样式隔离处理方式,官方文档有有说到处理方式;
一般在主应用中配置样式隔离:
如何确保主应用跟微应用之间的样式隔离
但很多情况往往不是很理想,例如说,主应用支持的浏览器版本低,无法开启官方的样式隔离处理方案;
这样就只能在微应用(子应用)中进行处理样式隔离。
想到的处理方式有两种:
1、每个css都添加class前缀
2、微应用打包为多应用,处理每个页面的样式兼容性,将影响降低到最小。
每个css都添加class前缀
如果所有的样式都用的是less或sass到是很好解决,网上能找到很多添加样式前缀的插件。如果用的是css 到比较麻烦。网上没有好用的插件,考虑自己写一个loader 插件对css添加class前缀对样式进行隔离。
document.body
有些框架的 modal弹窗组件,加了transfor 后,会将元素绑定到body上,导致样式隔离失效。这个并没有好的解决方案。只能是使用 spacename 隔离。