Parcel schreibt Medienabfragen falsch um

Question

Ich verwende derzeit Parcel 2.8.3 und @parcel/transformer-sass 2.8.3, aber ich habe einige Probleme mit der Art und Weise, wie ich Medienabfragen neu schreibe. Bei meinen vorherigen Projekten mit Parcel hatte ich keine derartigen Probleme und alles war so, wie es sein sollte.

Dies ist die SASS-Datei:

h1 {
  Farbe Rot;
}

Nur @media-Bildschirm und (maximale Breite: 40em) {
  h1 {
    Farbe blau;
  }
}

Dies ist die CSS-Ausgabe:

h1 {
  Farbe Rot;
}

Nur @media-Bildschirm und (Breite <= 40em) {
  h1 {
    Farbe: #00f;
  }
}

Wie Sie sehen können, wurde die Medienabfrage in der CSS-Datei von max-width in width <= 40em geändert, was bei der Anzeige auf einem tatsächlichen Mobiltelefon nicht funktioniert.

Wenn ich package-lock.json und package.json verwende, die aus einem 1 Monat alten Projekt kopiert wurden, werden die Medienabfragen so umgeschrieben, wie sie sein sollten. Wie oben gezeigt, ändern sich beim Ausführen von npm i Parcel & npm i @parcel/transformer-sass alle Medienabfragen wie im zweiten gezeigten Codeblock. Irgendwelche Vorschläge wären großartig.

Answer 1

我找到了扩展浏览器列表的解决方案。将以下内容添加到您的 package.json 中：

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

这将扩展支持的浏览器，并应确保它不会被覆盖，并且较旧的 safari 可以处理。