Webpack打包css后z-index被重新計算的解決方法
發(fā)現(xiàn)問題
最近在使用 Webpack 打包 css 文件時，發(fā)現(xiàn)了一個問題，發(fā)現(xiàn)打包后的 z-index 值跟源文件 z-index 不一致。
如下圖，左側(cè)是源文件，右側(cè)是打包后的文件：
即使加上 !important，經(jīng)過 OptimizeCssAssetsPlugin 調(diào)用 cssProcessor cssnano 處理之后也是 z-index: 2。
因此，很可能是 cssnano 進行了重新計算（cssnano 稱為 rebase），而且這種計算是不夠準(zhǔn)確的。
因為打包后的文件有兩處 z-index，這里是第二處，所以此處 z-index 是 2。
解決方法
cssnano 將 z-index rebase 歸類為 unsafe，而不是 bug，只有在單個網(wǎng)頁的 css 全部寫入一個 css 文件，并且不通過 JavaScript 進行改動時是 safe。
參考：http://cssnano.co/optimisations/zindex/
項目中提取了公共的 css，已經(jīng)對 layout 設(shè)置了很小的 z-index，因此受到 cssnano z-index rebase 的影響。
cssnano 默認(rèn)進行 z-index rebase。
unsafe (potential bug) 優(yōu)化項默認(rèn)不開啟應(yīng)該比較友好。
new OptimizeCssAssetsPlugin({
cssProcessor: require('cssnano'),
cssProcessorOptions: {
discardComments: {removeAll: true},
// 避免 cssnano 重新計算 z-index
safe: true
},
canPrint: false
})
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了一個炫酷的Bootstrap導(dǎo)航菜單的制作方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要為大家詳細(xì)介紹了Bootstrap實現(xiàn)翻頁效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
最近看到一些面試的回顧,不少有被面試官問到談?wù)凧S垃圾回收機制,下面這篇文章主要給大家介紹了關(guān)于js引擎垃圾回收機制的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01
這篇文章主要為大家詳細(xì)介紹了JavaScript編寫猜拳游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
JavaScript實現(xiàn)聯(lián)動菜單特效
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)聯(lián)動菜單特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-01-01
JavaScript通過HTML的class來獲取HTML元素的方法總結(jié)
除了getElementsByClassName()函數(shù),我們可以自己動手編寫程式來通過class獲取元素,接下來我們整理了一下JavaScript通過HTML的class來獲取HTML元素的方法總結(jié),需要的朋友可以參考下2016-05-05
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)隨機8位驗證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-06-06
這篇文章主要介紹了從一個Person例子進行分析重疊構(gòu)造器模式、Builder模式的使用場景以及運用JavaBeans模式彌補重疊構(gòu)造器模式的不足2018-03-03
Bootstrap 3.x打印預(yù)覽背景色與文字顯示異常的解決
前幾天同事有個問題咨詢我，他在調(diào)用print()來打印頁面，發(fā)現(xiàn)打印預(yù)覽頁面上的背景色無法顯示以及文字總是顯示為黑色，感覺非常奇怪，我通過測試發(fā)現(xiàn)是Bootstrap的問題，現(xiàn)在將解決的方法分享給大家，希望可以幫助到同樣遇到這個問題的朋友們，下面來一起看看。2016-11-11
JavaScript高級程序設(shè)計 錯誤處理與調(diào)試學(xué)習(xí)筆記
JavaScript高級程序設(shè)計 錯誤處理與調(diào)試學(xué)習(xí)筆記，學(xué)習(xí)js的朋友可以參考下。2011-09-09