cssnano升级导致z-index被重新计算

之前遇到了一个遮罩层级的奇怪问题。在dev环境能在弹窗前正常显示的全屏动画,在编译打包以后实际运行时跑到了弹窗的后面。
弹窗的z-index是500,按理说将动画放到501就应该能显示了,结果发现实际编译出来的z-index仅仅是1。
最后发现这个z-index被重新计算是cssnano的杰作。因为它只处理了项目本身的样式,而不包括第三方库的样式。

cssnano的配置如下:

1
2
3
4
5
"cssnano": {
"preset": "advanced",
"autoprefixer": false,
"postcss-zindex": false
}

可见z-index自动重新计算的配置应该是关闭的。
但是这配置实际上是从webpack2的旧项目上拷过来的,而新版本的cssnano已经悄悄修改了配置方式,这个写法等于什么都没配。
修改成以下配置就可以解决问题了:

1
2
3
4
5
6
"cssnano": {
"cssnano-preset-advanced": {
"zindex": false,
"autoprefixer": false
}
}