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