qiankun微應用中樣式隔離處理方式,官方文檔有有說到處理方式;
一般在主應用中配置樣式隔離:
如何確保主應用跟微應用之間的樣式隔離
但很多情況往往不是很理想,例如說,主應用支持的瀏覽器版本低,無法開啟官方的樣式隔離處理方案;
這樣就只能在微應用(子應用)中進行處理樣式隔離。
想到的處理方式有兩種:
1、每個css都添加class前綴
2、微應用打包為多應用,處理每個頁面的樣式兼容性,將影響降低到最小。
每個css都添加class前綴
如果所有的樣式都用的是less或sass到是很好解決,網上能找到很多添加樣式前綴的插件。如果用的是css 到比較麻煩。網上沒有好用的插件,考慮自己寫一個loader 插件對css添加class前綴對樣式進行隔離。
document.body
有些框架的 modal彈窗組件,加了transfor 后,會將元素綁定到body上,導致樣式隔離失效。這個并沒有好的解決方案。只能是使用 spacename 隔離。