umi 打包后,样式优先级错乱

2022-12-09  本文已影响0人  南慕瑶

【问题背景】

umi 项目,本地使用 dev 启动,一切正常。

build 后,出现样式错乱问题。

按照预期,页面样式需要覆盖掉组件库样式。

实际情况,页面样式和组件库样式,均被打入一个 chunk 包,且组件库优先级更高,覆盖掉了页面样式。

【解决方案】

参考:https://github.com/umijs/umi/issues/4978

进行 splitChunks 拆分,降低通用组件库样式优先级,提升页面样式优先级,亲测可行。

注意 priority 的值。

【遗留问题】

打包后的样式文件,umi.css 依然会被单独拆分出来。且实践发现,umi.css 的优先级,低于 tdesignVendor。因此,会造成,在 global.less 中编写的、预期覆盖掉 tdesign 原有样式的样式逻辑,无法覆盖 tdesign。

【目前解决方案】

1、如图示情况,可选择更改覆盖方式,传入 --padding-left 变量做样式覆盖

2、不支持 var 变量的情况,可手动增加自定义样式的权重

如有更优雅的解决方案,欢迎留言交流~~

上一篇下一篇

猜你喜欢

热点阅读