chrome89不再支持/deep/的解決方案： css-loader-deep-remove

解決方案： 大家可以用這個插件，css-loader-deep-remove 代替css-loader

https://www.npmjs.com/package/css-loader-deep-remove

 

 

發現使用chrome最新版（v89），有個別樣式出現了問題，排查定位后發現是有些錯誤地嵌套使用/deep/，在v88下是沒問題的，但在v89下就出現了問題，不再生效。我們使用VUE框架，ElementUI組件庫，Dialog控件樣式(SCSS)寫成了：

1 2 3 4 5 6 7

.my-dialog{ /deep/ .el-dialog { /deep/ .el-dialog__body{ height: 600px; } } }

 注意,嵌套使用/deep/是錯誤的，但在之前的版本沒有發現問題便沒發現。轉換后就是：

1 2 3

.my-dialog[data-v-0a1304a6] .el-dialog /deep/ .el-dialog__body { height: 600px; }

  嵌套使用/deep/只會讓第一個/deep/生效，第二個是不作處理的，之前沒意識到這個問題犯錯了。

問題重現

 為了重現問題，特意下載了便攜版chrome(v88)來對比（為了防止中毒，還額外研究了windows下沙盒，在沙盒里運行這軟件），如圖所示（測試代碼附在最后）：

 可以看到，在v88中，多出一個/deep/並不影響，但在v89里是不行的，搜索了一下，發現chromestatus chromestatus里有：

 The /deep/ combinator was a part of Shadow DOM v0, which has been deprecated and removed. Starting in M63, the /deep/ combinator was treated as a no-op, equivalent to a space “ “ combinator. As the code for all of Shadow DOM v0 was removed completely in M89, /deep/ will now throw exceptions in some JS operations, such as querySelectorAll. Simply replace it with “ “ to get pre-M89 behavior back.

 翻譯過來的意思是，在89之前，chrome瀏覽器會將/deep/ 當作空格字符串來處理，后面就完整刪除Shadow DOM v0的內容了。