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