脚本宝典收集整理的这篇文章主要介绍了[新手坑] 02.Vue开发环境和生产环境样式不一致的问题,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
上次提到作用域问题, 导致样是不生效, 这次讲的是我之前遇到的一个小坑, 稍不留神就完蛋.
前阵子做的一个小项目, 引入了Vant的UI库, 外加自己写的很多样式, 在开发环境下测试完美, 直接就build出来上正式环境, 发现竟然有多处样式未生效的问题! 还好是新项目, 尚未推广, 因此除了内部同事测试发现, 没有造成恶劣影响, 不过以后还是要注意下, 开发环境看着没问题, 但是生产环境一定还是要再过一遍.
那么为什么会出现这个问题呢? 我下面来做些小的测试观察一下.
在开发环境下, 每个不同块的style
都会被单独提取插入到页面的head
区域, 而生产出来的的文件是会被合并成一个文件, 在开发环境下, 这些style
块的顺序又和生产环境编译出来的css文件内的顺序有差别, 导致我们在开发环境中, 使用了相同的优先级, 覆盖原Vant的UI样式看起来正常, 而在生产后, 顺序错误导致失效了!
为了更加方便测试, 我在vue-cli-mobile-study项目创建了一个分支02-build-css-order
, 有兴趣可以看看~
本来想在不同块的css中添加注释以便于更明显的观察顺序变化, 结果发现生产环境中的注释被自动忽略了, 尝试去掉cssnano
插件执行, 发现还是有部分注释没有展示出来, 因为不是很重要, 所以没有去纠结这块.
开发环境中的head
区域有效的style
有5个. 分别是
index.html
中的css样式base.css
内容./vue-cli-mobile-study/src/assets/styles/_uireset.css
内容App.vue
的css内容HelloWorld.vue
的css内容而生产出来的却和这个不同, 因为被合并为1个css文件了, 因此我们观察单个css文件的上面4块的顺序
index.html
中的css样式App.vue
的css内容HelloWorld.vue
的css内容base.css
内容./vue-cli-mobile-study/src/assets/styles/_uireset.css
内容当然, 其实在有作用域的组件中所包含的样式顺序对项目是没有影响的, 所以我们需要关注的是全局引入的样式顺序, 从上面的现象中可以看出, 除了核心文件index.html
, 开发环境下, Vant样式默认在最前面(Vant实际上是Babel那边导入了), 而其他样式则似乎根据main.js
入口的顺序, 以及渲染顺序来添加到html头部的; 而生产环境
下, 相对诡异.
今天因为考虑到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样式, 以免出现开发环境和生产环境效果不同的情况.
在自己的组件样式编写中, 除了有公共的组件在不同页面的样式控制下可能需要全局样式外, 尽量写上作用域! 并且一定不要在自己写的组件内使用全局样式, 很容易出现顺序问题导致开发和生产结果不一致的情况!
以上是脚本宝典为你收集整理的[新手坑] 02.Vue开发环境和生产环境样式不一致的问题全部内容,希望文章能够帮你解决[新手坑] 02.Vue开发环境和生产环境样式不一致的问题所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。