vue+webpack+element打包后线上样式不一致

Posted 2023-03-16

参考技术A 在本地运行样式没问题，打包后到测试环境，就出现问题，可以看到加载的css顺序变化了。统一修改某个class,本地为A覆盖了B，打包后可能为B覆盖了A。查找了很多文章都说是加载css顺序不一样导致的，的确如此。往往是在某个组件中，没有用scoped,导致污染了全局的样式。
我的项目是因为之前多人开发，不严谨导致，css到处乱引用产生的错误。具体原因为在main.js引入了element的样式，然后到单独的组件中，又引入了一遍。

将所有组件中引入的（因为通过@import引入或者import引入，作用域是全局）面向全局的样式，都删掉，然后统一在main.js中引入。这样全局的顺序都在main.js 中确定，另外不要重复引用。

本地和测试的样式一样。不再受打包后的影响。这个时候，再针对某些污染的样式在scoped中具体修改，如果对于element弹窗类的，需要脱离scoped，那就写成公共样式在main.js中引入。
定一个规则，公共样式中main.js引入，单独的都写在scoped里面，如果单独都里面在分为公共的，可以通过以下方式引入。

我很奇怪为什么本地没问题，打包后有问题。打包加载的顺序按理是从上到下的。难道是加载具体都vue页面的时候，顺序不一样吗？待验证。