umi插件解决难题

本文讲述了在微前端框架中遇到的样式污染和跨域问题。由于一个Vue2子应用未引入样式重置文件,导致样式冲突。通过创建umi插件,修改antd源码中的特定样式,解决了样式混乱的问题。此外,还解决了子应用中第三方播放器报错的问题,通过修改源码中的全局变量引用,避免了父应用与子应用间的冲突。
摘要由CSDN通过智能技术生成

背景

系统是基于qiankun的微前端框架,有父应用和多个子应用,我负责父应用,其他业务线负责各自的子应用。

问题A - boax-sizing 样式污染

大部分子应用(有Umi也有vue2)都引入了antdProLayout会有样式重置文件;但是有一个子应用(Vue2)引入的是ElementUI,默认没有样式重置文件,也没有另外引入样式重置文件。

我们知道box-sizing的值可以是border-boxcontent-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,导致子应用的盒子模型全部乱了,宽高全部不对,可以脑补一下画面。<

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值