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 相关文章推荐
PHP 与 js的通信(via ajax,json)
Nov 16 Javascript
jQuery和AngularJS的区别浅析
Jan 29 Javascript
javascript中键盘事件用法实例分析
Jan 30 Javascript
jQuery检测返回值的数据类型
Jul 13 Javascript
JS获取文件大小方法小结
Dec 08 Javascript
详解前端自动化工具gulp自动添加版本号
Dec 20 Javascript
详解Layer弹出层样式
Aug 21 Javascript
layui 设置table 行的高度方法
Aug 17 Javascript
Webpack之tree-starking 解析
Sep 11 Javascript
JS实现滑动拼图验证功能完整示例
Mar 29 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
Jul 31 Javascript
解决ant Design Search无法输入内容的问题
Oct 29 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
新浪新闻小偷
2006/10/09 PHP
PHP中使用正则表达式提取中文实现笔记
2015/01/20 PHP
Laravel框架实现发送短信验证功能代码
2016/06/06 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
2009/02/04 Javascript
IFrame跨域高度自适应实现代码
2012/08/16 Javascript
jQuery Migrate 1.1.0 Released 注意事项
2014/06/14 Javascript
JavaScript检测上传文件大小的方法
2015/07/22 Javascript
javascript实现3D变换的立体圆圈实例
2015/08/06 Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
2017/04/18 Javascript
C#实现将一个字符转换为整数
2017/12/12 Javascript
浅谈 Vue 项目优化的方法
2017/12/16 Javascript
vue cli构建的项目中请求代理与项目打包问题
2018/02/26 Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
2019/05/10 Javascript
[01:02:25]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS VG
2014/05/25 DOTA
[01:44]《为梦想出发》—联想杯DOTA2完美世界全国高校联赛
2015/09/30 DOTA
[01:15]PWL S2开团时刻第二期——他们杀 我就白给
2020/11/25 DOTA
python写日志封装类实例
2015/06/28 Python
简介Django中内置的一些中间件
2015/07/24 Python
最大K个数问题的Python版解法总结
2016/06/16 Python
python 利用栈和队列模拟递归的过程
2018/05/29 Python
解决win64 Python下安装PIL出错问题(图解)
2018/09/03 Python
使用Python编写Prometheus监控的方法
2018/10/15 Python
python3通过selenium爬虫获取到dj商品的实例代码
2019/04/25 Python
python GUI库图形界面开发之PyQt5拖放控件实例详解
2020/02/25 Python
在服务器上安装python3.8.2环境的教程详解
2020/04/26 Python
详解pytorch中squeeze()和unsqueeze()函数介绍
2020/09/03 Python
Python爬虫之Selenium鼠标事件的实现
2020/12/04 Python
Lancer Skincare官方网站:抗衰老皮肤护理
2020/11/20 全球购物
商务英语毕业生自荐信范文
2013/11/08 职场文书
社区学习雷锋活动总结
2014/04/25 职场文书
甜品店创业计划书
2014/08/14 职场文书
学会感恩主题班会
2015/08/12 职场文书
Vue3.0写自定义指令的简单步骤记录
2021/06/27 Vue.js
css3中transform属性实现的4种功能
2021/08/07 HTML / CSS
javascript之Object.assign()的痛点分析
2022/03/03 Javascript