今天遇到了一个比较坑的问题,使用vue2+webpack3在开发环境的时候样式是好的,但是打包之后放在生产环境样式就错乱了。
后来打开浏览器看了一下,原来是因为自己写的一个全局的css文件位置错乱了,我使用第三方的框架是YDUI(http://vue.ydui.org/),
截图中的1就是我自己的样式,2就是ydui的样式,可以看到2的样式在下面肯定会覆盖掉我的样式,但是这种情况在开发环境就不存在。
我自己的样式在App.vue中引用的
于是百度了好一阵子,有的是说是在main.js里把第三方框架的样式放在最上面,但是打包试了一下,发现不行,因为ydui的样式也有一部分是动态添加到<style>中去的
也有说升级webpack4,使用min-css-extract-plugin的,但是升级webpack4一大堆坑,各种报错,最终果断放弃这个方法。
解决方案:
于是我还是回归问题本身,既然开发环境是好的,那就去配置开发环境的配置文件里看看,会有什么不同
果然,在util.js这个文件中发现了这么一个方法generateLoaders(),发现这个方法就是控制css、scss、less打包的,options.extract这个参数是在生产环境的时候为true,
因此生产环境打包时就走走1这一步,而开发环境就会走2这一步,差别就在这里,最终我把这个判断去掉了,果然就解决了。