3

我最近按照以下步骤将 TailwindCSS 添加到我的 React 应用程序中：https ://tailwindcss.com/docs/guides/create-react-app

现在的挑战是，当我部署到安装了 buildpack https://github.com/mars/create-react-app-buildpack的 Heroku 时，出现错误 Error injecting runtime env: bundle not found '/app/build/static/js/*.js'：

因为我不得不将 package.json 中的构建脚本更改为

"build": "craco build"

我的问题是，CRACO 是否将我的应用程序构建到与 Heroku 期望不同的文件夹中？还是我的问题可能是由其他原因引起的？

这是我的 package.json

{
  "name": "nantoo-react",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "flow": "flow",
    "format": "prettier --write 'src/**/*.{js,jsx}'",
    "heroku-postbuild": "npm rebuild node-sass"
  },
  "dependencies": {
    "@craco/craco": "^6.1.2",
    "@material-ui/core": "^4.11.2",
    "@material-ui/icons": "^4.11.2",
    "@testing-library/jest-dom": "^5.11.6",
    "@testing-library/react": "^11.2.2",
    "@testing-library/user-event": "^12.3.0",
    "autoprefixer": "^9.8.6",
    "axios": "^0.21.1",
    "body-scroll-lock": "^3.1.5",
    "bootstrap": "^4.5.2",
    "browser-image-compression": "^1.0.14",
    "cropperjs": "^1.5.9",
    "env-cmd": "^10.1.0",
    "eslint": "^7.27.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^3.4.0",
    "eslint-plugin-react": "^7.23.2",
    "flow-bin": "^0.151.0",
    "jquery": "^3.5.1",
    "mobile-detect": "^1.4.5",
    "node-sass": "^4.14.1",
    "p-sleep": "^1.1.0",
    "postcss": "^7.0.35",
    "prettier": "^2.3.0",
    "prettier-eslint": "^12.0.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-facebook-login": "^4.1.1",
    "react-modal": "^3.12.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.1",
    "react-slick": "^0.27.13",
    "react-tinder-card": "^1.3.1",
    "react-toastify": "^6.2.0",
    "react-tour-onboarding": "^1.15.63",
    "reactour": "^1.18.1",
    "slick-carousel": "^1.8.1",
    "socket.io-client": "^3.0.4",
    "styled-components": "^5.2.1",
    "tailwind-scrollbar-hide": "^1.0.3",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.1.4",
    "web-vitals": "^0.2.4"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "engines": {
    "node": "14.x",
    "npm": "7.x"
  },
  "devDependencies": {}
}

而我craco.config.js的是

module.exports = {
  style: {
    postcss: {
      plugins: [require("tailwindcss"), require("autoprefixer")],
    },
  },
};
4

0 回答 0