Parcel 2.0 PostCSS，如何禁用媒体查询转换

Question

我正在使用 Parcel 2.0。

我注意到，在 iPhone 13、iOS Safari 版本 15.x 和 16.x 上，媒体查询被完全忽略。

经过一些测试，我意识到 Safari 在使用“<' and '>”运算符而不是“最小宽度”和“最大宽度”时会忽略媒体查询。

原来的css语法是这样的：

@media screen and (max-width: 750px) {
    .my-container {
      background-color: rosybrown;
    }
}

Parcel 构建后，此媒体查询将转换为：

@media screen and (width <= 750px) {
  .my-container {
    background-color: #bc8f8f;
  }
}

如何禁用从“max-width”到“<=”的媒体查询转换？

我尝试查看 postCSS 文档了解如何禁用此转换，但没有找到任何内容，然后使用 browserslist 添加 polyfills：

"browserslist": [     "last 15 versions, not dead" ],

但没什么可做的，这些属性总是从 'max-width' 转换为 '<='

谢谢！

Answer 1

我第一次尝试为 PostCSS 安装这个插件，但它对我不起作用： https://github.com/postcss/postcss-media-minmax

然后我遵循了这种方法，它确实对我有用： https://github.com/parcel-bundler/parcel/issues/9139

注意如所写，请注意它仅在构建期间有效： “不过，它仅适用于地块构建，而不仅仅是地块。”