Webpack打包css后z-index被重新計算的解決方法
發(fā)現(xiàn)問題
最近在使用 Webpack 打包 css 文件時，發(fā)現(xiàn)了一個問題，發(fā)現(xiàn)打包后的 z-index 值跟源文件 z-index 不一致。
如下圖，左側是源文件，右側是打包后的文件：
即使加上 !important，經(jīng)過 OptimizeCssAssetsPlugin 調用 cssProcessor cssnano 處理之后也是 z-index: 2。
因此，很可能是 cssnano 進行了重新計算（cssnano 稱為 rebase），而且這種計算是不夠準確的。
因為打包后的文件有兩處 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 設置了很小的 z-index，因此受到 cssnano z-index rebase 的影響。
cssnano 默認進行 z-index rebase。
unsafe (potential bug) 優(yōu)化項默認不開啟應該比較友好。
new OptimizeCssAssetsPlugin({
cssProcessor: require('cssnano'),
cssProcessorOptions: {
discardComments: {removeAll: true},
// 避免 cssnano 重新計算 z-index
safe: true
},
canPrint: false
})
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關文章
ES6是JavaScript的一個版本,因為我們前面用到的vue默認使用ES6語法開發(fā),所以我們在這一節(jié)補充ES6的知識點,下面這篇文章主要給大家介紹了關于如何在項目中和平時練習中應用es6語法的相關資料,需要的朋友可以參考下2022-11-11
JavaScript中的另一個機制：cookie，則可以達到真正全局變量的要求。 cookie是瀏覽器 提供的一種機制，它將document 對象的cookie屬性提供給JavaScript。可以由JavaScript對其進行控制，而并不是JavaScript本身的性質。2008-05-05
通過表單在iframe內向一個跨域的url提交的時候，如何判斷提交成功了呢？這個，基本上，很難，因為瀏覽器安全沙箱的限制，我們沒有辦法通過獲得iframe內部不同域頁面的信息。2009-11-11
JavaScript常用數(shù)組元素搜索或過濾的四種方法詳解
這篇文章主要介紹了JavaScript常用數(shù)組元素搜索或過濾的四種方法,每種方式通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08
JavaScript知識點總結(六)之JavaScript判斷變量數(shù)據(jù)類型
這篇文章主要介紹了JavaScript知識點總結(六)之JavaScript判斷變量數(shù)據(jù)類型的相關資料，非常不錯具有參考借鑒價值,需要的朋友可以參考下2016-05-05
這篇文章主要為大家詳細介紹了js實現(xiàn)拖拽功能,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
科訊商業(yè)版中用到的ajax空間與分頁函數(shù)...2007-09-09
這篇文章主要介紹了Bootstrap禁用響應式布局的實現(xiàn)方法,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-03-03
這篇文章主要介紹了前端跨域的幾種解決方式，詳細介紹了同源策略并同時給出了跨域的五種解決方案，具體操作步驟大家可查看下文的詳細講解，感興趣的小伙伴們可以參考一下。2017-08-08
這篇文章主要給大家介紹了關于js中Generator函數(shù)的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用Javascript具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-04-04