postcss@7 插件失败：找不到模块“postcss-flexbugs-fixes”

Question

尝试解决

问题

Loading PostCSS "postcss-flexbugs-fixes" plugin failed: Cannot find module 'postcss-flexbugs-fixes'

所以我做了

npm install -D postcss-flexbugs-fixes

，但得到了：

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/postcss
npm ERR!   postcss@"^7.0.39" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer postcss@"^8.1.4" from [email protected]
npm ERR! node_modules/postcss-flexbugs-fixes
npm ERR!   dev postcss-flexbugs-fixes@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

这里有人提到了

resolutions

，但这似乎是一个

yarn

功能。 npm 相当于纱线分辨率？ 说解决方案是

"overrides":

，

但我不知道如何为我的上述具体情况指定

"overrides":

。

顺便说一句，

我也尝试过一起升级 postcss 和 postcss-flexbugs-fixes，但这带来了更多麻烦：

$ npm install -D postcss postcss-flexbugs-fixes

npm WARN idealTree Removing dependencies.postcss in favor of devDependencies.postcss
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: @craco/[email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react-scripts
npm ERR!   react-scripts@"^5.0.1" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react-scripts@"^4.0.0" from @craco/[email protected]
npm ERR! node_modules/@craco/craco
npm ERR!   @craco/craco@"^6.2.0" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/react-scripts
npm ERR!   peer react-scripts@"^4.0.0" from @craco/[email protected]
npm ERR!   node_modules/@craco/craco
npm ERR!     @craco/craco@"^6.2.0" from the root project

由于我几乎是一个 npm 菜鸟，所以我现在更喜欢最简单的修复，因为我分叉的存储库之前一直运行良好。因此，问题仅限于，如果可能的话，如何为我的上述具体情况指定

"overrides":

。

PS.

我的分叉仓库中似乎至少有三个不同版本的

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/[email protected]
| +-+ [email protected]
| | +-- [email protected]
| +-+ [email protected]
| | +-- [email protected] deduped
| +-+ [email protected]
| | +-- [email protected] deduped
| +-- [email protected] deduped
| +-+ [email protected]
|   +-- [email protected]
+-+ [email protected]
| +-- [email protected] deduped
+-- [email protected]
+-+ [email protected] invalid: "^4.0.0" from node_modules/@craco/craco
| +-+ [email protected]
| | +-+ [email protected]
| | | +-- [email protected] deduped
| | +-+ [email protected]
| | | +-- [email protected] deduped
| | +-+ postcss-module[email protected]
| | | +-- [email protected] deduped
. . .

Answer 1

1. 打开您的 package.json 文件。

2. 在 package.json 中，在顶层添加一个“overrides”字段。该字段将是一个对象，您可以在其中指定单个包的覆盖。

3. 如何为您的具体情况指定“覆盖”：
   { “名称”：“您的项目”， “版本”：“1.0.0”， “依赖项”：{ // 你的其他依赖项 }, “覆盖”：{ “postcss-flexbugs-修复”：{ “postcss”：“^7.0.39” } } }