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 可以处理。