背景
系统是基于qiankun
的微前端框架,有父应用和多个子应用,我负责父应用,其他业务线负责各自的子应用。
问题A - boax-sizing
样式污染
大部分子应用(有Umi
也有vue2
)都引入了antd
,ProLayout
会有样式重置文件;但是有一个子应用(Vue2)引入的是ElementUI
,默认没有样式重置文件,也没有另外引入样式重置文件。
我们知道box-sizing
的值可以是border-box
和content-box
,且默认为content-box
。 父应用antd的layout会把所有的 box-sizing
变为 border-box
,源码如下:
.ant-layout, .ant-layout *{
box-sizing: border-box;
}
子应用没有设置全局的box-sizing
,使用的是默认的content-box
,只有需要使用box-sizing: border-box;
的地方才写一下。
但是在我们父应用的全局影响下,全部样式的box-sizing
都变成了border-box
,导致子应用的盒子模型全部乱了,宽高全部不对,可以脑补一下画面。<