Parcel 錯誤地重寫了媒體查詢

Question

我目前正在使用 Parcel 2.8.3 和 @parcel/transformer-sass 2.8.3，但我在重寫媒體查詢的方式上遇到了一些問題。在我之前使用 Parcel 的專案中，我沒有遇到這樣的問題，一切都是它應該的樣子。

這是 SASS 檔案：

h1 {
  color: red;
}

@media only screen and (max-width: 40em) {
  h1 {
    color: blue;
  }
}

這是 CSS 輸出：

h1 {
  color: red;
}

@media only screen and (width <= 40em) {
  h1 {
    color: #00f;
  }
}

正如您所看到的，CSS 檔案中的媒體查詢已從 max-width 更改為 width <= 40em，這在實際手機上查看時不起作用。

如果我使用從 1 個月前的項目複製的 package-lock.json 和 package.json，媒體查詢將按其應有的方式重寫。如上所示，在為我的新專案執行 npm i Parcel & npm i @parcel/transformer-sass 時，當我啟動專案時，所有媒體查詢都會發生更改，如第二個代碼塊所示。任何建議都會很棒。

Answer 1

我找到了擴展瀏覽器清單的解決方案。將以下內容加入您的 package.json 中：

"browserslist": "> 0.5%, last 3 versions, not dead"

這將擴展支援的瀏覽器，並應確保它不會被覆蓋，並且較舊的 safari 可以處理。