【问题背景】
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 变量的情况,可手动增加自定义样式的权重
如有更优雅的解决方案,欢迎留言交流~~
网友评论