webpack 打包css z-index值被重新计算

z-index值在环境上被改变

---

最近vue项目开发遇到一个迷惑的问题，我明明设置了z-index的值，本地测试也没什么问题，在开发环境上浏览器打开开发者工具看到的z-index却不是我设置的值，我再使用！impotant来设置z-index的值，依然没有作用。

这是显示的值
.modal {
    bottom: -5px;
    z-index: 4;
}

这是自己设置的
.modal {
  bottom: -5px;
  z-index: 1050;
}

原因：
OptimizeCssPlugin 调用 cssProcessor cssnano 处理，可能是 cssnano 进行了重新计算（cssnano 称为 rebase），而且这种计算是不够准确的，所以覆盖了自己设置的值

解决办法: 将 z-index rebase 归类为 unsafe， cssnano 默认进行 z-index rebas，所以不开启unsafe即可解决问题。

参考代码

var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')

.........
.........

// Compress extracted CSS. We are using this plugin so that possible
// duplicated CSS from different components can be deduped.
new OptimizeCSSPlugin({
 cssProcessorOptions: {
   safe: true
 }
})