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í)中應(yīng)用es6語法
ES6是JavaScript的一個版本,因為我們前面用到的vue默認(rèn)使用ES6語法開發(fā),所以我們在這一節(jié)補充ES6的知識點,下面這篇文章主要給大家介紹了關(guān)于如何在項目中和平時練習(xí)中應(yīng)用es6語法的相關(guān)資料,需要的朋友可以參考下2022-11-11
JavaScript中的另一個機制：cookie，則可以達到真正全局變量的要求。 cookie是瀏覽器 提供的一種機制，它將document 對象的cookie屬性提供給JavaScript?？梢杂蒍avaScript對其進行控制，而并不是JavaScript本身的性質(zhì)。2008-05-05
通過表單在iframe內(nèi)向一個跨域的url提交的時候，如何判斷提交成功了呢？這個，基本上，很難，因為瀏覽器安全沙箱的限制，我們沒有辦法通過獲得iframe內(nèi)部不同域頁面的信息。2009-11-11
JavaScript常用數(shù)組元素搜索或過濾的四種方法詳解
這篇文章主要介紹了JavaScript常用數(shù)組元素搜索或過濾的四種方法,每種方式通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08
JavaScript知識點總結(jié)(六)之JavaScript判斷變量數(shù)據(jù)類型
這篇文章主要介紹了JavaScript知識點總結(jié)(六)之JavaScript判斷變量數(shù)據(jù)類型的相關(guān)資料，非常不錯具有參考借鑒價值,需要的朋友可以參考下2016-05-05
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)拖拽功能,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
科訊商業(yè)版中用到的ajax空間與分頁函數(shù)...2007-09-09
Bootstrap禁用響應(yīng)式布局的實現(xiàn)方法
這篇文章主要介紹了Bootstrap禁用響應(yīng)式布局的實現(xiàn)方法,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-03-03
這篇文章主要介紹了前端跨域的幾種解決方式，詳細(xì)介紹了同源策略并同時給出了跨域的五種解決方案，具體操作步驟大家可查看下文的詳細(xì)講解，感興趣的小伙伴們可以參考一下。2017-08-08
這篇文章主要給大家介紹了關(guān)于js中Generator函數(shù)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用Javascript具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04