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 相关文章推荐
JavaScript 大数据相加的问题
Aug 03 Javascript
Jquery Mobile 自定义按钮图标
Nov 18 Javascript
详解js中class的多种函数封装方法
Jan 03 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
Feb 09 Javascript
微信小程序实战之轮播图(3)
Apr 17 Javascript
JavaScript中 DOM操作方法小结
Apr 25 Javascript
vue.js中mint-ui框架的使用方法
May 12 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
Oct 11 Javascript
React Native基础入门之初步使用Flexbox布局
Jul 02 Javascript
node中IO以及定时器优先级详解
May 10 Javascript
JavaScript中var的重要性实例分析
Jul 09 Javascript
javascript设计模式 ? 原型模式原理与应用实例分析
Apr 10 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 文件上传实例代码
2012/04/19 PHP
php实现搜索类封装示例
2016/03/31 PHP
PHP文件操作详解
2016/12/30 PHP
php实现的二分查找算法示例
2017/06/20 PHP
使用composer安装使用thinkphp6.0框架问题【视频教程】
2019/10/01 PHP
javascript+mapbar实现地图定位
2010/04/09 Javascript
javascript下利用arguments实现string.format函数
2010/08/24 Javascript
jQuery探测位置的提示弹窗(toolTip box)详细解析
2013/11/14 Javascript
js取消单选按钮选中示例代码
2013/11/14 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
2016/08/05 Javascript
使用BootStrapValidator完成前端输入验证
2016/09/28 Javascript
3分钟掌握常用的JS操作JSON方法总结
2017/04/25 Javascript
Nodejs 发布自己的npm包并制作成命令行工具的实例讲解
2018/05/15 NodeJs
仿ElementUI实现一个Form表单的实现代码
2019/04/23 Javascript
原生jQuery实现只显示年份下拉框
2020/12/24 jQuery
python利用beautifulSoup实现爬虫
2014/09/29 Python
浅谈对yield的初步理解
2017/05/29 Python
PyQt5实现拖放功能
2018/04/25 Python
python 字典中文key处理,读取,比较方法
2018/07/06 Python
Python+OpenCV+pyQt5录制双目摄像头视频的实例
2019/06/28 Python
django 使用 PIL 压缩图片的例子
2019/08/16 Python
python3.6编写的单元测试示例
2019/08/17 Python
英国领先的维生素和营养补充剂直接供应商:Healthspan
2019/04/22 全球购物
小学家长评语大全
2014/04/16 职场文书
卖车协议书范例
2014/09/16 职场文书
学校党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
慈善献爱心倡议书
2015/04/27 职场文书
漂亮妈妈观后感
2015/06/08 职场文书
上甘岭观后感
2015/06/10 职场文书
数学备课组工作总结
2015/08/12 职场文书
2015质检员个人年终工作总结
2015/10/23 职场文书
python实现大文本文件分割成多个小文件
2021/04/20 Python
Redis三种集群模式详解
2021/10/05 Redis
Golang流模式之grpc的四种数据流
2022/04/13 Golang
instantclient客户端 连接oracle数据库
2022/04/26 Oracle
Java由浅入深通关抽象类与接口(上篇)
2022/04/26 Java/Android