Solution to Z-index recalculation caused by cssnano upgrade

Time:2021-10-30

I encountered a strange problem with the mask level before. In the dev environment, the full screen animation that can be normally displayed in front of the pop-up window runs behind the pop-up window after compiling and packaging.
The Z-index of the pop-up window is 500. Normally, the animation should be displayed when it is placed in 501. It is found that the actually compiled Z-index is only 1.
Finally, it is found that the Z-index is recalculated, which is a masterpiece of cssnano. Because it only deals with the styles of the project itself, not the styles of third-party libraries.

Cssnano is configured as follows:

"cssnano": {
    "preset": "advanced",
    "autoprefixer": false,
    "postcss-zindex": false
}

It can be seen that the configuration of Z-index automatic recalculation should be turned off.
However, this configuration is actually copied from the old project of webpack2, and the new version of cssnano has quietly modified the configuration method. This writing is equivalent to nothing.
The problem can be solved by modifying to the following configuration:

"cssnano": {
    "cssnano-preset-advanced": {
        "zindex": false,
        "autoprefixer": false
    }
}