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 相关文章推荐
简单的无缝滚动程序-仅几行代码
May 08 Javascript
javascript getElementsByName()的用法说明
Jul 31 Javascript
jQuery 点击图片跳转上一张或下一张功能的实现代码
Mar 12 Javascript
js实现上传图片之上传前预览图片
Mar 25 Javascript
对frameset、frame、iframe的js操作示例代码
Aug 16 Javascript
showModalDialog模态对话框的使用详解以及浏览器兼容
Jan 11 Javascript
JS实现设置ff与ie元素绝对位置的方法
Mar 08 Javascript
探讨AngularJs中ui.route的简单应用
Nov 16 Javascript
node跨域请求方法小结
Aug 25 Javascript
JS原型继承四步曲及原型继承图一览
Nov 28 Javascript
Node.js 使用jade模板引擎的示例
May 11 Javascript
基于vue 实现表单中password输入的显示与隐藏功能
Jul 19 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作的文本留言本的例子(三)
2006/10/09 PHP
destoon常用的安全设置概述
2014/06/21 PHP
浅谈php提交form表单
2015/07/01 PHP
TP - 比RBAC更好的权限认证方式(Auth类认证)
2021/03/09 PHP
AJAX架构之Dojo篇
2007/04/10 Javascript
cnblogs csdn 代码运行框实现代码
2009/11/02 Javascript
客户端限制只能上传jpg格式图片的js代码
2010/12/09 Javascript
eval与window.eval的差别分析
2011/03/17 Javascript
Fastest way to build an HTML string(拼装html字符串的最快方法)
2011/08/20 Javascript
document.createElement()用法及注意事项(ff下不兼容)
2013/03/13 Javascript
js和as的稳定传值问题解决
2013/07/14 Javascript
javascript获取select标签选中的值
2016/06/04 Javascript
AngularJS入门教程之服务(Service)
2016/07/27 Javascript
nodejs中全局变量的实例解析
2017/03/07 NodeJs
详谈AngularJs 控制器、数据绑定、作用域
2017/07/09 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
2017/07/21 Javascript
使用原生js+canvas实现模拟心电图的实例
2017/09/20 Javascript
p5.js入门教程和基本形状绘制
2018/03/15 Javascript
jQuery实现滑动开关效果
2020/08/02 jQuery
vue制作toast组件npm包示例代码
2020/10/29 Javascript
[51:52]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
Python中的条件判断语句基础学习教程
2016/02/07 Python
Scrapy-redis爬虫分布式爬取的分析和实现
2017/02/07 Python
Python判断字符串是否为字母或者数字(浮点数)的多种方法
2018/08/03 Python
对pyqt5多线程正确的开启姿势详解
2019/06/14 Python
python调用函数、类和文件操作简单实例总结
2019/11/29 Python
Pandas实现dataframe和np.array的相互转换
2019/11/30 Python
Pandas时间序列重采样(resample)方法中closed、label的作用详解
2019/12/10 Python
【HTML5】Canvas绘制简单图片教程
2016/05/13 HTML / CSS
3种方式实现瀑布流布局小结
2019/09/05 HTML / CSS
比利时网上药店: Drogisterij.net
2017/03/17 全球购物
工作作风承诺书
2014/08/30 职场文书
拾金不昧表扬信
2015/01/16 职场文书
2015年初一班主任工作总结
2015/05/13 职场文书
新手开公司创业注意事项有哪些?
2019/07/29 职场文书
关于mysql中时间日期类型和字符串类型的选择
2021/11/27 MySQL