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 相关文章推荐
IE8 下的Js错误HTML Parsing Error...
Aug 14 Javascript
javascript 学习笔记(八)javascript对象
Apr 12 Javascript
JQuery实现表格中相同单元格合并示例代码
Jun 26 Javascript
jQuery简易图片放大特效示例代码
Jun 09 Javascript
Angular 页面跳转时传参问题
Aug 01 Javascript
Angular ng-repeat指令实例以及扩展部分
Dec 26 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
Jan 05 Javascript
微信小程序遇到修改数据后页面不渲染的问题解决
Mar 09 Javascript
p5.js实现斐波那契螺旋的示例代码
Mar 22 Javascript
JavaScript canvas实现文字时钟
Jan 10 Javascript
详解uniapp的全局变量实现方式
Jan 11 Javascript
如何理解Vue简单状态管理之store模式
May 15 Vue.js
利用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
DedeCms模板安装/制作概述
2007/03/11 PHP
php后门URL的防范
2013/11/12 PHP
php sybase_fetch_array使用方法
2014/04/15 PHP
php post大量数据时发现数据丢失问题解决方法
2015/06/20 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
实例讲解PHP表单
2020/06/10 PHP
jscript之Read an Excel Spreadsheet
2007/06/13 Javascript
js实现键盘Enter键提交表单的方法
2015/05/27 Javascript
CKEditor无法验证的解决方案(js验证+jQuery Validate验证)
2016/05/09 Javascript
NodeJS中的MongoDB快速入门详细教程
2016/11/11 NodeJs
利用prop-types第三方库对组件的props中的变量进行类型检测
2017/05/02 Javascript
angular.fromJson与toJson方法用法示例
2017/05/17 Javascript
为什么我们要做三份 Webpack 配置文件
2017/09/18 Javascript
AngularJs点击状态值改变背景色的实例
2017/12/18 Javascript
webpack4之SplitChunksPlugin使用指南
2018/06/12 Javascript
解决VantUI popup 弹窗不弹出或无蒙层的问题
2020/11/03 Javascript
原生JS实现pc端轮播图效果
2020/12/21 Javascript
一个超级简单的python web程序
2014/09/11 Python
Python对数据库操作
2016/03/28 Python
详解Python进程间通信之命名管道
2017/08/28 Python
python pygame模块编写飞机大战
2018/11/20 Python
python如何实现从视频中提取每秒图片
2020/10/22 Python
CSS3的RGBA中关于整数和百分比值的转换
2015/08/04 HTML / CSS
英国快时尚女装购物网站:PrettyLittleThing
2018/08/15 全球购物
Bose美国官网:购买Bose耳机和音箱
2019/03/10 全球购物
Lookfantastic澳大利亚官网:英国知名美妆购物网站
2021/01/07 全球购物
医院实习接收函
2014/01/12 职场文书
安全生产中长期规划实施方案
2014/02/21 职场文书
党员领导干部廉洁从政承诺书
2014/03/27 职场文书
法学专业毕业生求职信
2014/06/12 职场文书
创先争优个人承诺书
2014/08/30 职场文书
银行自荐信范文
2015/03/25 职场文书
公司员工辞职信范文
2015/05/12 职场文书
二婚主持词
2015/06/30 职场文书
2016领导干部廉洁从政心得体会
2016/01/19 职场文书
Android在Sqlite3中的应用及多线程使用数据库的建议
2022/04/24 Java/Android