[新手坑] 02.Vue开发环境和生产环境样式不一致的问题

[新手坑] 02.Vue开发环境和生产环境样式不一致的问题

上次提到做用域问题, 致使样是不生效, 此次讲的是我以前遇到的一个小坑, 稍不留神就完蛋.

前阵子作的一个小项目, 引入了Vant的UI库, 外加本身写的不少样式, 在开发环境下测试完美, 直接就build出来上正式环境, 发现居然有多处样式未生效的问题! 还好是新项目, 还没有推广, 所以除了内部同事测试发现, 没有形成恶劣影响, 不过之后仍是要注意下, 开发环境看着没问题, 可是生产环境必定仍是要再过一遍.

那么为何会出现这个问题呢? 我下面来作些小的测试观察一下.

问题现象

在开发环境下, 每一个不一样块的style都会被单独提取插入到页面的head区域, 而生产出来的的文件是会被合并成一个文件, 在开发环境下, 这些style块的顺序又和生产环境编译出来的css文件内的顺序有差异, 致使咱们在开发环境中, 使用了相同的优先级, 覆盖原Vant的UI样式看起来正常, 而在生产后, 顺序错误致使失效了!

为了更加方便测试, 我在vue-cli-mobile-study项目建立了一个分支02-build-css-order, 有兴趣能够看看~

原本想在不一样块的css中添加注释以便于更明显的观察顺序变化, 结果发现生产环境中的注释被自动忽略了, 尝试去掉 cssnano插件执行, 发现仍是有部分注释没有展现出来, 由于不是很重要, 因此没有去纠结这块.

开发环境中的head区域有效的style有5个. 分别是

1. index.html中的css样式
2. vant的base.css内容
3. 路径为./vue-cli-mobile-study/src/assets/styles/_uireset.css内容
4. App.vue的css内容
5. HelloWorld.vue的css内容

而生产出来的却和这个不一样, 由于被合并为1个css文件了, 所以咱们观察单个css文件的上面4块的顺序

1. index.html中的css样式
2. App.vue的css内容
3. HelloWorld.vue的css内容
4. vant的base.css内容
5. 路径为./vue-cli-mobile-study/src/assets/styles/_uireset.css内容

固然, 其实在有做用域的组件中所包含的样式顺序对项目是没有影响的, 因此咱们须要关注的是全局引入的样式顺序, 从上面的现象中能够看出, 除了核心文件index.html, 开发环境下, Vant样式默认在最前面(Vant其实是Babel那边导入了), 而其余样式则彷佛根据main.js入口的顺序, 以及渲染顺序来添加到html头部的; 而生产环境下, 相对诡异.

2018年4月21日补充

今天由于考虑到Vant的中部分reset样式并无较好的对页面进行样式统一, 所以引入 normalize.css, 因而基于上面的测试, 如今拥有 6块 style. 而 normalize.css在两种环境下的区别仍是有的~

我将normalize.css直接写入main.js的顶部进行import, 发现能够很好的将normalize.css内的样式放在除了不可控制index.html内样式以后的首位. 这样就很棒棒了, 一般咱们会将normalize.css和reset.css优先加载.

问题缘由

我有在GitHub查阅过相关Issues, 也找过StackOverflow相关内容, 不过没有什么收获, 外加Webpack的高级配置方面也不是很熟悉, 所以也就没有研究出来, 若是有大神能指点一二欢迎留言.

解决方案

在须要覆盖第三方组件的默认样式是, 尽可能使用高于第三方组件优先级的css样式, 以避免出现开发环境和生产环境效果不一样的状况.

在本身的组件样式编写中, 除了有公共的组件在不一样页面的样式控制下可能须要全局样式外, 尽可能写上做用域! 而且必定不要在本身写的组件内使用全局样式, 很容易出现顺序问题致使开发和生产结果不一致的状况!