Webpack打包css后z-index被重新计算的解决方法

在 Webpack 的 CSS 打包过程中，我们发现了一个关于 z-index 值的问题。在打包后的 CSS 文件中，z-index 的值似乎被重新计算了，这引起了我们的关注。这个问题不仅影响了我们的开发过程，也可能影响到我们的用户体验。

让我们明确一下问题的表现。在源文件中的 z-index 值和在打包后的文件中的值并不一致。即使我们在源文件中使用了 !important 标记，经过 OptimizeCssAssetsPlugin 调用 cssProcessor 处理后，z-index 的值仍然会被改变。这种变化很可能是由 cssnano 进行的重新计算（也称为 rebase）导致的。这种计算似乎并不准确。

这个问题出现的原因在于 cssnano 在处理 z-index 时将其视为 unsafe（潜在问题），而不是 bug。这种情况在我们将公共 CSS 提取出来并对 layout 设置 z-index 时尤为明显。由于 cssnano 默认进行 z-index 的 rebase，因此我们需要找到一种解决方案来避免这个问题。

解决方案是什么呢？我们可以通过调整 OptimizeCssAssetsPlugin 的配置来解决这个问题。具体来说，我们需要设置 cssProcessorOptions 中的 safe 选项为 true，以避免 cssnano 重新计算 z-index。这样可以避免潜在的 bug，确保我们的 CSS 文件在打包后仍然保持正确的 z-index 值。以下是具体的配置示例：

```javascript

new OptimizeCssAssetsPlugin({

cssProcessor: require('cssnano'),

cssProcessorOptions: {

discardComments: {removeAll: true},

// 避免 cssnano 重新计算 z-index

safe: true

},

canPrint: false

})

```

通过以上的配置调整，我们可以确保在打包 CSS 文件时保持 z-index 值的正确性。这对于我们的开发过程和用户体验至关重要。希望这篇文章能为大家带来帮助，如果有任何疑问或需要进一步交流，请留言交流。感谢大家对狼蚁SEO的支持和关注。通过优化和调整配置，我们可以确保 Webpack 的打包过程更加顺畅，让我们的网站或应用程序更加优秀。