溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

Webpack打包c(diǎn)ss后z-index被重新計(jì)算的解決方法

發(fā)布時(shí)間：2020-08-30 08:55:36 來(lái)源：腳本之家 閱讀：239 作者：袖之歡 欄目：web開(kāi)發(fā)

發(fā)現(xiàn)問(wèn)題

最近在使用 Webpack 打包 css 文件時(shí)，發(fā)現(xiàn)了一個(gè)問(wèn)題，發(fā)現(xiàn)打包后的 z-index 值跟源文件 z-index 不一致。

如下圖，左側(cè)是源文件，右側(cè)是打包后的文件：

Webpack打包c(diǎn)ss后z-index被重新計(jì)算的解決方法

即使加上 !important，經(jīng)過(guò) OptimizeCssAssetsPlugin 調(diào)用 cssProcessor cssnano 處理之后也是 z-index: 2。

因此，很可能是 cssnano 進(jìn)行了重新計(jì)算（cssnano 稱(chēng)為 rebase），而且這種計(jì)算是不夠準(zhǔn)確的。

Webpack打包c(diǎn)ss后z-index被重新計(jì)算的解決方法

因?yàn)榇虬蟮奈募袃商?z-index，這里是第二處，所以此處 z-index 是 2。

解決方法

cssnano 將 z-index rebase 歸類(lèi)為 unsafe，而不是 bug，只有在單個(gè)網(wǎng)頁(yè)的 css 全部寫(xiě)入一個(gè) css 文件，并且不通過(guò) JavaScript 進(jìn)行改動(dòng)時(shí)是 safe。

參考：http://cssnano.co/optimisations/zindex/

項(xiàng)目中提取了公共的 css，已經(jīng)對(duì) 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)不開(kāi)啟應(yīng)該比較友好。

new OptimizeCssAssetsPlugin({
 cssProcessor: require('cssnano'),
 cssProcessorOptions: {
 discardComments: {removeAll: true},
 // 避免 cssnano 重新計(jì)算 z-index
 safe: true
 },
 canPrint: false
})

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)億速云的支持。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手