Webpack打包css后z-index被重新计算的解决方法


Posted in Javascript onJune 18, 2017

发现问题

最近在使用 Webpack 打包 css 文件时,发现了一个问题,发现打包后的 z-index 值跟源文件 z-index 不一致。

如下图,左侧是源文件,右侧是打包后的文件:

Webpack打包css后z-index被重新计算的解决方法

即使加上 !important,经过 OptimizeCssAssetsPlugin 调用 cssProcessor cssnano 处理之后也是 z-index: 2。

因此,很可能是 cssnano 进行了重新计算(cssnano 称为 rebase),而且这种计算是不够准确的。

Webpack打包css后z-index被重新计算的解决方法

因为打包后的文件有两处 z-index,这里是第二处,所以此处 z-index 是 2。

解决方法

cssnano 将 z-index rebase 归类为 unsafe,而不是 bug,只有在单个网页的 css 全部写入一个 css 文件,并且不通过 JavaScript 进行改动时是 safe。

参考:http://cssnano.co/optimisations/zindex/

项目中提取了公共的 css,已经对 layout 设置了很小的 z-index,因此受到 cssnano z-index rebase 的影响。

cssnano 默认进行 z-index rebase。

unsafe (potential bug) 优化项默认不开启应该比较友好。

new OptimizeCssAssetsPlugin({
 cssProcessor: require('cssnano'),
 cssProcessorOptions: {
 discardComments: {removeAll: true},
 // 避免 cssnano 重新计算 z-index
 safe: true
 },
 canPrint: false
})

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
基于jquery打造的百分比动态色彩条插件
Sep 19 Javascript
Extjs4中tree的拖拽功能(可以两棵树之间拖拽) 简单实例
Dec 08 Javascript
吐槽一下我所了解的Node.js
Oct 08 Javascript
浅析javascript操作 cookie对象
Dec 26 Javascript
微信内置浏览器私有接口WeixinJSBridge介绍
May 25 Javascript
javascript转换静态图片,增加粒子动画效果
May 28 Javascript
50 个 jQuery 插件可将你的网站带到另外一个高度
Apr 26 Javascript
javascript解决小数的加减乘除精度丢失的方案
May 31 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
Jun 07 Javascript
使用JS代码实现俄罗斯方块游戏
Aug 03 Javascript
JavaScript私有变量实例详解
Jan 24 Javascript
javascript for循环性能测试示例
Aug 07 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
Jun 18 #Javascript
JavaScript ES6中const、let与var的对比详解
Jun 18 #Javascript
jquery DataTable实现前后台动态分页
Jun 17 #jQuery
jQuery Jsonp跨域模拟搜索引擎
Jun 17 #jQuery
vue router路由嵌套不显示问题的解决方法
Jun 17 #Javascript
详解vue+vueRouter+webpack的简单实例
Jun 17 #Javascript
js轮播图无缝滚动效果
Jun 17 #Javascript
You might like
PHP面试题之文件目录操作
2015/10/15 PHP
javascript函数库-集合框架
2007/04/27 Javascript
JavaScript 在各个浏览器中执行的耐性
2009/04/06 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
2016/10/16 Javascript
第一次接触神奇的前端框架vue.js
2016/12/01 Javascript
基于javascript实现的购物商城商品倒计时实例
2016/12/11 Javascript
jQuery控制元素隐藏和显示
2017/03/03 Javascript
详解vuex 中的 state 在组件中如何监听
2017/05/23 Javascript
解决vue2 在mounted函数无法获取prop中的变量问题
2018/11/15 Javascript
详解Vue之父子组件传值
2019/04/01 Javascript
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
2020/08/06 Javascript
[06:11]2014DOTA2国际邀请赛 专访团结一心的VG战队
2014/07/21 DOTA
PYTHON正则表达式 re模块使用说明
2011/05/19 Python
python实现的各种排序算法代码
2013/03/04 Python
python3+dlib实现人脸识别和情绪分析
2018/04/21 Python
用python简单实现mysql数据同步到ElasticSearch的教程
2018/05/30 Python
Python实现的简单读写csv文件操作示例
2018/07/12 Python
Python3实现定时任务的四种方式
2019/06/03 Python
Python Django Cookie 简单用法解析
2019/08/13 Python
详解Django-channels 实现WebSocket实例
2019/08/22 Python
深入浅析python的第三方库pandas
2020/02/13 Python
Jupyter notebook如何实现指定浏览器打开
2020/05/13 Python
Python如何将模块打包并发布
2020/08/30 Python
安装Anaconda3及使用Jupyter的方法
2020/10/27 Python
新秀丽拉杆箱美国官方网站:Samsonite美国
2016/07/25 全球购物
描述Cookie和Session的作用,区别和各自的应用范围,Session工作原理
2015/03/25 面试题
普师专业个人自荐信范文
2013/11/26 职场文书
大学生冰淇淋店商业计划书
2014/01/14 职场文书
yy婚礼司仪主持词
2014/03/14 职场文书
村委会贫困证明范文
2014/09/21 职场文书
年度考核登记表个人总结
2015/03/06 职场文书
道歉信范文
2015/05/12 职场文书
军训阅兵新闻稿
2015/07/17 职场文书
大学新生入学感想
2015/08/07 职场文书
详解如何修改nginx的默认端口
2021/03/31 Servers
浅谈Vue的computed计算属性
2022/03/21 Vue.js