如何为postcss@7配置npm overrides解决postcss-flexbugs-fixes依赖冲突

我正在解决「Loading PostCSS "postcss-flexbugs-fixes" plugin failed: Cannot find module 'postcss-flexbugs-fixes'」错误，执行npm install -D postcss-flexbugs-fixes时触发依赖树解析错误：当前项目使用postcss@7.0.39，但postcss-flexbugs-fixes@5.0.2要求peer依赖postcss@^8.1.4。

我了解yarn的resolutions对应npm的overrides，但不清楚该场景下如何配置。之前尝试同时升级postcss和postcss-flexbugs-fixes，却引发@craco/craco@6.3.0与react-scripts@5.0.1的版本冲突（前者要求peer依赖react-scripts@^4.0.0）。

作为npm新手，我需要最简单的修复方案，仅通过配置npm overrides解决问题。此外，项目中存在至少三个不同版本的postcss：

$ grep postcss package.json 
    "@tailwindcss/postcss7-compat": "^2.2.16",
    "postcss": "^7.0.39",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.1.2",

$ npm ls postcss
+-+ @tailwindcss/postcss7-compat@2.2.16
| +-+ postcss-functions@3.0.0
| | +-- postcss@6.0.23
| +-+ postcss-js@2.0.3
| | +-- postcss@7.0.39 deduped
| +-+ postcss-nested@4.2.3
| | +-- postcss@7.0.39 deduped
| +-- postcss@7.0.39 deduped
| +-+ purgecss@4.0.3
|   +-- postcss@8.3.9
+-+ autoprefixer@9.8.6
| +-- postcss@7.0.39 deduped
+-- postcss@7.0.39
+-+ react-scripts@5.0.1 invalid: "^4.0.0" from node_modules/@craco/craco
| +-+ css-loader@6.8.1
| | +-+ icss-utils@5.1.0
| | | +-- postcss@8.4.31 deduped
| | +-+ postcss-modules-extract-imports@3.0.0
| | | +-- postcss@8.4.31 deduped
| | +-+ postcss-modules-local-by-default@4.0.3
| | | +-- postcss@8.4.31 deduped
. . .

核心思路 #

因为升级postcss会触发craco与react-scripts的冲突，所以选择安装兼容postcss@7的postcss-flexbugs-fixes版本，并用npm overrides强制统一依赖树中的版本，避免冲突。

具体步骤 #

1. 安装适配postcss@7的postcss-flexbugs-fixes版本（4.x系列支持postcss@7）：

   npm install -D postcss-flexbugs-fixes@4.2.1
   

2. 在package.json中添加overrides配置，锁定版本：

   "overrides": {
     "postcss-flexbugs-fixes": "4.2.1",
     "postcss": "^7.0.39"
   }
   

3. 重新安装依赖：

   npm install
   

说明 #

• postcss-flexbugs-fixes@4.2.1是官方支持postcss@7的最新稳定版，无需升级postcss即可正常使用。
• overrides会强制npm在整个依赖树中使用指定版本，解决peer依赖不匹配和多版本postcss的问题。
• 锁定postcss版本可以防止其他依赖自动升级postcss，避免触发craco与react-scripts的冲突。

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