如何阻止Parcel转换媒体查询语法以兼容旧浏览器？

以下几种方案可直接解决该问题：

1. 配置目标浏览器范围，让Parcel自动降级语法 #

在项目根目录的package.json中添加browserslist字段，明确指定需要兼容的浏览器版本，Parcel会依据此配置自动将CSS语法转换为目标浏览器支持的形式：

"browserslist": [
  "> 0.5%",
  "last 2 versions",
  "Firefox ESR",
  "not dead"
]

该配置会覆盖Parcel默认设置，确保媒体查询保留max-width这类传统兼容语法。

2. 自定义PostCSS配置，禁用媒体查询新语法转换 #

Parcel默认通过PostCSS处理CSS，你可以新建postcss.config.js文件，直接关闭媒体查询范围语法的转换规则：

module.exports = {
  plugins: {
    'postcss-preset-env': {
      features: {
        'media-query-ranges': false
      }
    }
  }
};

添加此配置后，Parcel将不再把max-width: 600px转换为width <= 600px。

3. 检查Parcel版本（可选） #

若上述配置未生效，可确认当前使用的Parcel版本。部分较新版本的Parcel默认启用了CSS新语法支持，若不想调整配置，也可尝试降级到之前的稳定版本，但更推荐采用前两种配置方式解决，避免版本降级带来的其他潜在问题。

内容的提问来源于stack exchange，提问作者khaled mohy