背景：
业务场景中，webpack + React 搭建的新 webportal 工程，Header 要单独打包出来，供老工程的应用使用，打包完成应用于其他应用后，自测发现 header 中的一个菜单，被应用中的一个 z-index：40 的元素遮盖了，源码中，header 中这个菜单的 z-index 层级为 500， 而 在浏览器调试时看 z-index 的值 却是 9，所以才会被应用中的元素遮盖
原因：
排除所有影响因素后，发现是 webpack 打包时 optimize-css-assets-webpack-plugin 插件，调用 cssProcessor cssnano 对 z-index 重新计算了，所以打包出来的 z-index 值，是重新计算后的值，而不是原来的值了
原 webpack 配置
// 只贴出相关联的配置
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
...
plugins: [
isEnvProduction && new OptimizeCSSAssetsPlugin({})
]
解决办法：
在 webpack 配置中 关掉 cssnano 对 z-index 的计算
// 只贴出相关联的配置
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
...
plugins: [
isEnvProduction && new OptimizeCSSAssetsPlugin({
cssProcessor: require('cssnano'),
cssProcessorOptions: {
discardComments: { removeAll: true },
// 避免 cssnano 重新计算 z-index
safe: true
},
canPrint: false
})
]
那么 问题就解决啦
