【新手坑】02.Vue开发环境与生产环境风格不一致的问题。上次提到作用域问题，导致示例无法生效。这次说的是我之前遇到的一个小坑。前段时间做的一个小项目引入了Vant的UI库，加上很多自己写的样式。在开发环境下测试完美，搭建直接上正式环境。我发现有很多样式没有生效的问题！幸运的是！是个新项目，还没有推广。因此，除了内部同事的检测结果外，并没有造成任何不良影响。但是，您以后应该注意它。开发环境看着没问题，但是生产环境还得再过一遍。那么为什么会出现这个问题呢？？让我做一些小测试来观察问题。在开发环境中，会将每个不同块的样式提取出来，分别插入到页面的头部区域，将产生的文件合并为一个文件。在开发环境中，这些样式块的顺序与生产环境编译的css文件中的顺序是不一样的。结果我们在开发环境中使用了相同的优先级，覆盖掉原来的VantUI风格看起来很正常。制作完成后，顺序错误导致失败！为了方便测试，我在vue-cli-mobile-study项目中创建了一个分支02-build-css-order。有兴趣的可以看看~本来想通过在不同的css块中添加注释来更清楚的观察顺序变化。原来生产环境的评论自动忽略了。尝试去掉cssnano插件执行，发现有些注释还是显示不出来，因为不是很重要，所以没在意这个。开发环境中头部区域有5个有效样式。index.html中css样式vant的base.css内容路径为./vue-cli-mobile-study/src/assets/styles/_uireset.csscontentApp.vue的css内容与HelloWorld.vue的css内容，因为合并到一个css文件中，所以我们按照单个css文件的前四块顺序观察index.html中的css样式App.vue的css内容HelloWorld.vue的css内容vant的base.css内容路径为./vue-cli-mobile-study/src/assets/styles/_uireset.csscontent当然，实际上，在scopedcomponents中，包含样式的顺序对项目没有影响声音，所以我们需要注意的是全局导入样式的顺序。从上面的现象我们可以看出，除了核心文件index.html，在开发环境中，Vant样式默认在最前面（Vant其实是Babel引入的），其他样式好像是加在了前面htmlhead按照main.js的入口顺序和渲染顺序；在生产环境中，比较奇怪。2018年4月21日今天添加的，因为考虑到Vant中间部分重置样式没有很好的统一页面样式，所以引入了normalize.css，所以根据上面的测试，现在有6种样式。normalize.css的两个环境还是有区别的~我会归一化的。css直接写到main.js最上面导入，发现normalize.css中的样式可以放在index.html中的样式之后，无法控制。这很好，通常我们会首先加载规范化.css和reset.css。问题的原因是我查了GitHub上的相关Issues，也在StackOverflow上找到了相关内容，但是没有什么收获，而且我对Webpack的高级配置也不是很熟悉，所以没有去研究。如果有哪位高手可以指出一二，欢迎留言。解决方法是覆盖第三方组件的默认样式，尽量使用优先级高于第三方组件的css样式，避免出现开发环境和生产环境不一样的情况效果。在你自己的组件样式的编写中，除了在不同页面的样式控制下有公共组件可能需要全局样式外，尽量写scope！而且一定不能在自己的组件中使用全局样式，很容易出现顺序问题导致开发和生产结果不一致！
