解决前端打包后 线上样式与测试环境样式不一样bug In 世界杯晋级规则 @2025-05-15 17:18:08
前天一个功能页面完成了，本地测试一切正常，自己打包上线后线上展示完全与本地展示的不一样。上图
本地：
线上：
再重新打包了次后重新部署发现线上页面还是一样，所以排除了是打包问题，继续寻找其他问题
在两个页面都打开调试台排查bom树检查不一样的地方，首先确定排查方向，线上页面tatle和暂无数据的div发生了并列，所以着重排查这两个div子级父级的dom元素，终于在线上bom样式上发现了猫腻
table和暂无数据div的父级莫名奇妙多了个flex，样式表一查看，多了个.list div的样式，里面正写着开启flex 所以产生并列，修改html的class后重新打包上线恢复正常。
个人推测应该是打包机制的问题
打包后会出现文件夹，文件夹里会有img，css，js文件夹，所有的css样式都会被压缩到css文件夹里，在不同文件中做的相同的css名的操作会合并在一起所以产生了污染，就造成了本地与线上不一致的情况。
以后尽量保持好习惯 就算写了scoped最大的class也要编个码带上父级文件名，然后利用scss嵌套继续写样式，这样安全感十足。