圆月山庄资源网 Design By www.vgjia.com
发现问题
最近在使用 Webpack 打包 css 文件时,发现了一个问题,发现打包后的 z-index 值跟源文件 z-index 不一致。
如下图,左侧是源文件,右侧是打包后的文件:
即使加上 !important,经过 OptimizeCssAssetsPlugin 调用 cssProcessor cssnano 处理之后也是 z-index: 2。
因此,很可能是 cssnano 进行了重新计算(cssnano 称为 rebase),而且这种计算是不够准确的。
因为打包后的文件有两处 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 })
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对的支持。
圆月山庄资源网 Design By www.vgjia.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
圆月山庄资源网 Design By www.vgjia.com
暂无评论...
更新日志
2024年10月09日
2024年10月09日
- TGA主持人发文祝贺《暗喻幻想》 国外网友:提名稳了?
- 【原神】V5.0攻略 | 旋曜玉帛收集攻略(序号81~序号90)
- 【原神】V5.0攻略 | 旋曜玉帛收集攻略(序号91~序号100)
- 2024周年庆兑换码最新分享,兑换码一览
- 无悔华夏魏晋二期全新剧本更新内容一览
- 斗罗大陆逆转时空提升战力攻略 怎么提升战力
- 炉石传说酒馆战棋阵容推荐2024 酒馆战棋阵容排行榜
- s14全球总决赛瑞士轮抽签规则是什么 瑞士轮抽签结果规则介绍
- s14全球总决赛瑞士轮队伍有哪些 世界赛瑞士轮队伍名单一览
- s14全球总决赛瑞士轮赛制是什么 全球总决赛瑞士轮赛制详情
- 《COD21》全新剧情宣传片:10月25日XGP见!
- 美国拳王家门口身中7枪遇害 年仅31岁凶手仍未被逮捕
- 《寂静岭2》重制版光追对比:氛围更加恐怖
- 林慧萍.1982-往昔(飞跃复刻版)【歌林】【WAV+CUE】
- 陈楚生.2007-原来我一直都不孤单(EP)【天娱传媒】【WAV+CUE】