Parcel 2.8.3 错误改写媒体查询致移动端失效求助

问题根源 #

你遇到的是Dart Sass（Parcel的Sass转换器依赖的底层编译器）的版本行为变化：较新版本的Dart Sass会自动将传统的max-width/min-width媒体查询语法，转换为CSS比较语法（width <=/width >=），但这种语法在部分旧移动端浏览器中兼容性不足，导致样式失效。复用旧项目的package-lock.json能正常编译，是因为锁定了依赖的具体版本，避免了这个行为变化。

解决建议 #

• 锁定依赖版本
  直接复用旧项目的package.json和package-lock.json，或者在新项目的package.json中明确指定与旧项目一致的parcel、@parcel/transformer-sass以及底层依赖的sass版本号（避免使用^或~这类范围符）。比如：

  {
    "devDependencies": {
      "parcel": "2.8.3",
      "@parcel/transformer-sass": "2.8.3",
      "sass": "具体旧版本号"
    }
  }
  

  执行npm i后会安装固定版本的依赖，避免触发新的语法转换。

• 禁用Sass的媒体查询自动转换
  在项目的package.json中添加Parcel的Sass配置项，强制使用传统媒体查询语法：

  "parcel": {
    "sass": {
      "mediaQueries": "legacy"
    }
  }
  

  这个配置会让Sass保留max-width/min-width的原始写法，不再转换为兼容性较差的比较语法。

• 检查并回退Sass版本
  执行npm ls sass命令，对比新旧项目中sass的版本号。如果新项目的sass版本高于旧项目，直接在package.json中锁定旧版本的sass，再重新安装依赖即可。

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