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 变量的情况，可手动增加自定义样式的权重
如有更优雅的解决方案，欢迎留言交流~~
【问题背景】 umi 项目，本地使用 dev 启动，一切正常。 build 后，出现样式错乱问题。 按照预期，页面...
extract-text-webpack-plugin:抽离css样式,防止将样式打包在js中引起页面样式加载错乱...
未打包之前，样式正常被编译显示。在项目打包之后，发现样式错乱，打开控制台发现添加的样式没有生效。最后查了资料，只要...
原因：css加载顺序有问题，样式被覆改解决：1、main.js文件中将 样式 集中存放，而且要放在 类库 状态等文...
行内样式 > 内部样式/外部样式 内部样式/外部样式不存在优先级，谁后加载谁优先级高 伪类首字母 > 伪类首行 >...
css样式（选择器）的优先级 计算权重分类 important 内联样式 后写的优先级高
首要原则 1.优先级高的样式覆盖优先级低的样式2.同一优先级的样式，后定义的覆盖先定义的，即后来居上 多重样式间的...
1.内联样式表的优先级最高 2.内部样式表与外部样式表的优先级和书写的顺序有关，后书写的优先级别高
开发工具 踩坑：在开发中使用的是chrome浏览器，结果打包后在微信中显示样式错乱。 建议：使用微信开发者工具进行...
样式根据引入和声明需要分开介绍，一般来说分为引入样式优先级和声明样式优先级。 一、引入样式优先级 引入样式优先级一...
本文标题：umi 打包后，样式优先级错乱
本文链接：https://www.haomeiwen.com/subject/znjnfdtx.html
网友评论