解决前端打包后 线上样式与测试环境样式不一样bug

前天一个功能页面完成了，本地测试一切正常，自己打包上线后线上展示完全与本地展示的不一样。上图

本地：

 线上：

 再重新打包了次后重新部署发现线上页面还是一样，所以排除了是打包问题，继续寻找其他问题

在两个页面都打开调试台排查bom树检查不一样的地方，首先确定排查方向，线上页面tatle和暂无数据的div发生了并列，所以着重排查这两个div子级父级的dom元素，终于在线上bom样式上发现了猫腻

 table和暂无数据div的父级莫名奇妙多了个flex，样式表一查看，多了个.list div的样式，里面正写着开启flex 所以产生并列，修改html的class后重新打包上线恢复正常。

个人推测应该是打包机制的问题

打包后会出现文件夹，文件夹里会有img，css，js文件夹，所有的css样式都会被压缩到css文件夹里，在不同文件中做的相同的css名的操作会合并在一起所以产生了污染，就造成了本地与线上不一致的情况。

以后尽量保持好习惯 就算写了scoped最大的class也要编个码带上父级文件名，然后利用scss嵌套继续写样式，这样安全感十足。