升级Plyr3.5.10至3.7.2时PostCSS版本不兼容报错如何解决

错误核心原因 #

升级Plyr 3.5.10至3.7.2版本时触发构建报错，报错信息如下：
Unknown error from PostCSS plugin. Your current PostCSS version is 6.0.23, but postcss-preset-env uses 7.0.29. Perhaps this is the source of the error below.
本质是PostCSS生态的主版本不匹配：项目直接依赖的PostCSS为6.x主版本，而Plyr新版本连带安装的postcss-preset-env依赖PostCSS 7.x主版本，跨主版本的API差异导致插件运行异常。

可落地解决方案 #

按优先级从高到低排列：

• 升级项目PostCSS版本到7.x适配
  这是侵入性最低、最符合依赖逻辑的方案，直接将项目内的PostCSS开发依赖升级到7.0.29（和postcss-preset-env依赖版本完全对齐）即可：
  npm执行：
  npm install postcss@7.0.29 --save-dev
  yarn执行：
  yarn add postcss@7.0.29 --dev
  操作完成后删除node_modules目录、对应包管理器的锁文件（package-lock.json/yarn.lock/pnpm-lock.yaml），重新执行依赖安装命令后验证构建流程。
• 固定postcss-preset-env到PostCSS 6兼容版本
  如果项目内其他PostCSS插件强绑定PostCSS 6.x，无法升级PostCSS主版本，可以将postcss-preset-env降级到最后一个兼容PostCSS 6的6.7.0版本：
  npm install postcss-preset-env@6.7.0 --save-dev
  同样执行删除缓存依赖、重装的流程后验证构建。
• 通过包管理器能力强制统一PostCSS版本
  不想调整直接依赖版本的情况下，可以通过包管理器的版本强制解析能力，让项目内所有依赖引用的PostCSS都统一为7.0.29版本：
  npm 8.3.0及以上版本：在package.json根节点添加overrides配置：

  {
    "overrides": {
      "postcss": "7.0.29"
    }
  }
  

  yarn 所有主流版本：在package.json根节点添加resolutions配置：

  {
    "resolutions": {
      "postcss": "7.0.29"
    }
  }
  

  配置保存后同样删除缓存依赖、重装即可生效。

校验注意事项 #

PostCSS跨主版本调整后，需要同步检查项目内其他PostCSS生态插件（包括但不限于autoprefixer、postcss-import、cssnano、postcss-loader）的版本兼容性，若出现新的API报错，同步将对应插件升级到适配PostCSS 7的版本即可。

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