cssnano升級致使z-index被從新計算的解決辦法

以前遇到了一個遮罩層級的奇怪問題。在dev環境能在彈窗前正常顯示的全屏動畫,在編譯打包之後實際運行時跑到了彈窗的後面。
彈窗的z-index是500,按理說將動畫放到501就應該能顯示了,結果發現實際編譯出來的z-index僅僅是1。
最後發現這個z-index被從新計算是cssnano的傑做。由於它只處理了項目自己的樣式,而不包括第三方庫的樣式。css

cssnano的配置以下:webpack

"cssnano": {
    "preset": "advanced",
    "autoprefixer": false,
    "postcss-zindex": false
}

可見z-index自動從新計算的配置應該是關閉的。
可是這配置其實是從webpack2的舊項目上拷過來的,而新版本的cssnano已經悄悄修改了配置方式,這個寫法等於什麼都沒配。
修改爲如下配置就能夠解決問題了:web

"cssnano": {
    "cssnano-preset-advanced": {
        "zindex": false,
        "autoprefixer": false
    }
}
相關文章
相關標籤/搜索