事实
在本地运行样式没问题,打包后到测试环境,就出现问题,可以看到加载的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里面,如果单独都里面在分为公共的,可以通过以下方式引入。
<style scoped src="1.css"></style>
我的疑惑?
我很奇怪为什么本地没问题,打包后有问题。打包加载的顺序按理是从上到下的。难道是加载具体都vue页面的时候,顺序不一样吗?待验证。