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 相关文章推荐
禁止刷新,回退的JS
Nov 25 Javascript
ExtJS 设置级联菜单的默认值
Jun 13 Javascript
纯Javascript实现Windows 8 Metro风格实现
Oct 15 Javascript
JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
Oct 17 Javascript
jquery实现树形菜单完整代码
Dec 29 Javascript
jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
Sep 14 Javascript
bootstrap精简教程_动力节点Java学院整理
Jul 14 Javascript
使用jQuery实现购物车结算功能
Aug 15 jQuery
js匿名函数使用&传参(实例)
Sep 08 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
Nov 22 Javascript
javascript Canvas动态粒子连线
Jan 01 Javascript
在HTML5 localStorage中存储对象的示例代码
Apr 21 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 IE中下载附件问题解决方法
2014/01/07 PHP
PHP启动windows应用程序、执行bat批处理、执行cmd命令的方法(exec、system函数详解)
2014/10/20 PHP
php中strtotime函数用法详解
2014/11/15 PHP
thinkPHP中session()方法用法详解
2016/12/08 PHP
PHP+Ajax实现的检测用户名功能简单示例
2019/02/12 PHP
php array_map()函数实例用法
2021/03/03 PHP
js隐藏与显示回到顶部按钮及window.onscroll事件应用
2013/01/25 Javascript
封装了一个支持匿名函数的Javascript事件监听器
2014/06/05 Javascript
jQuery实现带延迟效果的滑动菜单代码
2015/09/02 Javascript
Ajax与服务器(JSON)通信实例代码
2016/11/05 Javascript
nodejs实例解析(输出hello world)
2017/01/03 NodeJs
js数组常用最重要的方法
2018/02/04 Javascript
关于Google发布的JavaScript代码规范你要知道哪些
2018/04/04 Javascript
深入浅析Vue中的 computed 和 watch
2018/06/06 Javascript
jQuery模拟12306城市选择框功能简单实现方法示例
2018/08/13 jQuery
React+Redux实现简单的待办事项列表ToDoList
2019/09/29 Javascript
element form 校验数组每一项实例代码
2019/10/10 Javascript
js+h5 canvas实现图片验证码
2020/10/11 Javascript
python通过pil模块将raw图片转换成png图片的方法
2015/03/16 Python
Python调用SQLPlus来操作和解析Oracle数据库的方法
2016/04/09 Python
解决python nohup linux 后台运行输出的问题
2018/05/11 Python
Tensorflow 训练自己的数据集将数据直接导入到内存
2018/06/19 Python
Python 删除整个文本中的空格,并实现按行显示
2018/07/24 Python
Python实现屏幕录制功能的代码
2020/03/02 Python
Django User 模块之 AbstractUser 扩展详解
2020/03/11 Python
python软件都是免费的吗
2020/06/18 Python
关于iframe跨域使用postMessage的实现
2019/10/29 HTML / CSS
英国健身超市:Fitness Superstore
2019/06/17 全球购物
Linux如何为某个操作添加别名
2013/03/01 面试题
公司庆典活动邀请函
2014/01/09 职场文书
投资合作协议书范本
2014/04/17 职场文书
美术指导助理求职信
2014/04/20 职场文书
2014年重阳节老干部座谈会上的讲话稿
2014/09/25 职场文书
工作批评与自我批评范文
2014/10/16 职场文书
2015小学毕业班工作总结
2015/07/21 职场文书
解决Vue+SpringBoot+Shiro跨域问题
2021/06/09 Vue.js