Parcel 錯誤地重寫了媒體查詢
P粉722521204
2023-08-30 16:22:21
<p>我目前正在使用 Parcel 2.8.3 和 @parcel/transformer-sass 2.8.3，但我在重寫媒體查詢的方式上遇到了一些問題。在我之前使用 Parcel 的專案中，我沒有遇到這樣的問題，一切都是它應該的樣子。 </p>
<p>這是 SASS 檔案：</p>
<pre class="brush:php;toolbar:false;">h1 {
color: red;
}
@media only screen and (max-width: 40em) {
h1 {
color: blue;
}
}</pre>
<p>這是 CSS 輸出：</p>
<pre class="brush:php;toolbar:false;">h1 {
color: red;
}
@media only screen and (width <= 40em) {
h1 {
color: #00f;
}
}</pre>
<p>正如您所看到的，CSS 檔案中的媒體查詢已從 max-width 更改為 width <= 40em，這在實際手機上查看時不起作用。 </p>
<p>如果我使用從 1 個月前的項目複製的 package-lock.json 和 package.json，媒體查詢將按其應有的方式重寫。如上所示，在為我的新專案執行<code> npm i Parcel & npm i @parcel/transformer-sass</code> 時，當我啟動專案時，所有媒體查詢都會發生更改，如第二個代碼塊所示。任何建議都會很棒。 </p>
我找到了擴展瀏覽器清單的解決方案。將以下內容加入您的 package.json 中：
這將擴展支援的瀏覽器，並應確保它不會被覆蓋，並且較舊的 safari 可以處理。