【新手坑】02.Vue开发环境和生产环境风格不一致的问题。 之前提到了范围问题css覆盖优先级，导致示例不生效。 这次说的是以前遇到的一个小坑，一不小心就完了。
不久前我参与了一个小项目。 我介绍了Vant的UI库和我写的很多样式。 在开发环境下测试完美。 我直接构建了它并运行到环境中。 我发现有很多样式不生效的问题！ 幸运的是，这是一个新项目，还没有推广。 所以不仅内部朋友测试发现没有造成什么不良影响，而且我们以后还是需要注意的。 开发环境看起来没问题，但生产环境还是要再测试一下。
那么为什么会出现这个问题呢？ 让我做一些小测试来观察。
问题现象
在开发环境中，每个不同块的样式都会被单独提取出来插入到页面的头部区域，并且产生的文件会合并为一个文件。 在开发环境中，这些样式块的顺序将与生产中的顺序相同。 环境编译的css文件顺序不同。 结果，在开发环境中，我们采用了同样的优先级来覆盖原有的Vant UI风格。 看上去很正常，但是生产出来后，订单错误，失败了！
为了让测试更加方便，我在vue-cli-mobile-study项目中创建了一个分支02-build-css-order。 有兴趣的话可以看看哦~
我原本想在不同块的css中添加注释，以便更明显地观察顺序变化。 但是我发现生产环境中的注释被手动忽略了。 我尝试去掉cssnano插件执行，发现有些注释仍然没有显示，因为它们不是很清晰。 很重要，所以我不担心这个。
开发环境中head区域有5种有效样式。 他们是：
css样式vant在index.html中的base.css内容路径为./vue-cli-mobile-study/src/assets/styles/_uireset.css内容App.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.css 内容
当然，实际上作用域组件中包含的样式顺序对项目没有影响，所以我们需要关注的是全局引入的样式顺序。 从前面的现象可以看出，除了核心文件index.html之外，在开发环境中，Vant样式默认在最前面（Vant实际上是从Babel导出的），而其他样式显然是添加在了前面的。后面的 HTML 按照 main.js 条目的顺序和渲染顺序； 在生产环境中，比较陌生。
2018年4月21日新增。考虑到Vant中间的重置样式不能很好地统一页面样式，引入了normalize.css。 根据之前的测试，现在有6种风格。 并正常化。 两个环境下的css还是有一些区别的~
我直接将normalize.css写到main.js底部导入，发现normalize.css中的样式可以先放在index.html中不可控的样式之后。 这很棒，通常我们会先加载normalize.css和reset.css。
问题原因
我在GitHub上查看了相关Issues，并在StackOverflow上搜索了相关内容，但并没有太多收获。 另外我对Webpack的中间配置不是很熟悉，所以没有研究过。 如果有专家可以给我一些建议，请留言。
解决方案
当需要覆盖第三方组件的默认样式时，尽量使用优先级低于第三方组件的CSS样式，避免开发环境和生产环境出现不同的效果。
在编辑自己的组件样式时，除了公共组件在不同页面的样式控制下可能需要全局样式外css覆盖优先级，尽量写下范围！ 并且一定不要在你编写的组件中使用全局样式，因为这样很容易造成顺序问题。 导致开发和生产结果不一致！
发表评论