The solution for re-calculation of z-index after css is packaged in Webpack is webpackz-index.

The solution for re-calculation of z-index after css is packaged in Webpack is webpackz-index.

Problems Found

Recently, when using Webpack to package css files, we found that the value of the packaged z-index is inconsistent with that of the source file z-index.

For example, the source file is on the left and the packaged file is on the right:

Even if you add! Important. After OptimizeCssAssetsPlugin calls cssProcessor cssnano for processing, it is also z-index: 2.

Therefore, it is likely that cssnano has been re-computed (cssnano is called rebase), and this computation is not accurate enough.

Because the packaged file contains two z-indexes and the second one, the z-index is 2.

Solution

Css nano classifies z-index rebase as unsafe instead of a bug. It is safe only when all css files on a single webpage are written to a css file and are not modified through JavaScript.

Reference: http://cssnano.co/optimisations/zindex/

The project extracts public css, A small z-index has been set for layout, so it is affected by cssnano z-index rebase.

Cssnano performs z-index rebase by default.

The unsafe (potential bug) optimization item is not enabled by default and should be friendly.

New OptimizeCssAssetsPlugin ({cssProcessor: require ('cssnan'), cssProcessorOptions: {discardComments: {removeAll: true}, // avoid cssnano recalculating z-index safe: true}, canPrint: false })

Summary

The above is all the content of this article. I hope the content of this article will help you in your study or work. If you have any questions, please leave a message, thank you for your support.