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 }})