解决vue打包后css位置错乱的问题——小结

今天遇到了一个比较坑的问题，使用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这一步，差别就在这里，最终我把这个判断去掉了，果然就解决了。