找到一种方法来防止parcel改变媒体查询语法

Question

我正在尝试使用 Html、Sass 和 JavaScript 构建一个网站。因此，我使用 Parcel 来捆绑我的网站，但我遇到的问题是，如果我想通过在命令行中键入“npm start”来开始捆绑，Parcel 将媒体查询语法从

更改

@media screen and (max-width: 600px) {
    div {
        background-color: teal;
    }
}

到

@media screen and (width <= 600px) {
  div {
    background-color: teal;
  }
}

但是最后一个语法的问题是它在旧版浏览器中不起作用，事实上我认为这是一种新的媒体查询语法，目前尚未得到广泛支持。

所以我希望得到帮助并找到解决这个问题的方法

Answer 1

您可以使用 browserslist 来修复它：https://browsersl.ist/

只需在您的 package.json（根级别）中添加以下行

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

注意：您可以根据需要进行配置。

Answer 2

我尝试通过添加浏览器列表来遵循建议的解决方案，但没有任何区别。 运行 scss 构建后：

@media only screen and (min-width: 768px) {...}

我再次得到以下CSS：

@media only screen and (width >= 768px) {...}

Safari 13.1 示例会忽略该内容

还尝试了更具体的浏览器列表配置，但没有成功:( ...

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