在npm启动时“PostCSS错误”“PostCSS 8”

Question

我的项目一直在获取错误PostCSS plugin tailwindcss requires PostCSS 8时npm start。

这个案子是一样的，但是现在它已经老了，什么也不能用。PostCSS 8现在应该与Tailwind和CRA兼容，所以我安装了最新版本，但返回了相同的错误。我被困在这里近3天，所以我会感谢任何建议或意见！

我尝试过(但从未成功)：

• 降级为兼容版本的tailwindcss/postcss7-compat": "^2.2.17”、PostCSS ^7.0.39和autoprefixer": "^9.8.8
• 升级到tailwindcss:"^2.2.17"、autoprefixer:"^10.4.0"和PostCSS ^8.3.11的最新版本
• 升级了node v16.13.0、craco: "^6.4.0"和react-scripts:"^4.0.3"。
• 在start脚本中添加--openssl-legacy-provider
• 已删除的包-锁.yarn、纱线-锁.yarn、节点-模块和npm install
• 多次重新启动VScode和浏览器。

{
  "dependencies": {
    "@craco/craco": "^6.4.0",
    "@heroicons/react": "^1.0.4",
    "@types/react-router-dom": "^5.1.8",
    "autoprefixer": "^10.4.0",
    "axios": "^0.24.0",
    "classnames": "^2.3.1",
    "cra-template-typescript": "1.1.2",
    "postcss": "^8.3.11",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^4.0.3",
    "react-textarea-autosize": "^8.3.3",
    "react-transition-group": "^4.4.2",
    "router": "^1.3.5",
    "tailwindcss": "^2.2.17",
    "typescript": "^4.3.5",
    "yarn": "^1.22.17"
  },
  "scripts": {
    "build:tailwind": "tailwindcss build -i src/index.css -o src/index.css",
    "build:css": "postcss src/tailwind.css -o static/dist/tailwind.css",
    "prestart": "npm run build:tailwind",
    "prebuild": "npm run build:tailwind",
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  }

Answer 1

我花了那么多时间在这件事上，终于找到了解决办法。使用顺风CLI代替postCSS和自动重定位器。跟着这位医生走。不要忘记从require('autoprefixer')中删除craco.config.js。PostCSS的一位官员说，PostCSS8现在与create兼容，但不幸的是，它并不兼容。我看到很多人仍然和我有同样的问题，所以我希望这个答案能帮助到别人。

Answer 2

我遇到了一个类似的问题，试图升级我的，使其使用顺风2中的“顺风3”。最后，我完成了以下步骤：

1. 更新的反应-脚本。该应用程序目前在版本4上，因此我遵循了从4升级到5：https://github.com/facebook/create-react-app/blob/main/CHANGELOG.md的步骤
2. 在我的package.json文件中，我停止使用craco，方法是用react脚本开始替换craco。最后一节如下所示："scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", },

在那之后，我能够运行npm run start，我的应用程序启动了。