溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
發現問題
最近在使用 Webpack 打包 css 文件時，發現了一個問題，發現打包后的 z-index 值跟源文件 z-index 不一致。
如下圖，左側是源文件，右側是打包后的文件：
即使加上 !important，經過 OptimizeCssAssetsPlugin 調用 cssProcessor cssnano 處理之后也是 z-index: 2。
因此，很可能是 cssnano 進行了重新計算（cssnano 稱為 rebase），而且這種計算是不夠準確的。
因為打包后的文件有兩處 z-index，這里是第二處，所以此處 z-index 是 2。
解決方法
cssnano 將 z-index rebase 歸類為 unsafe，而不是 bug，只有在單個網頁的 css 全部寫入一個 css 文件，并且不通過 JavaScript 進行改動時是 safe。
參考：http://cssnano.co/optimisations/zindex/
項目中提取了公共的 css，已經對 layout 設置了很小的 z-index，因此受到 cssnano z-index rebase 的影響。
cssnano 默認進行 z-index rebase。
unsafe (potential bug) 優化項默認不開啟應該比較友好。
new OptimizeCssAssetsPlugin({
cssProcessor: require('cssnano'),
cssProcessorOptions: {
discardComments: {removeAll: true},
// 避免 cssnano 重新計算 z-index
safe: true
},
canPrint: false
})
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
