Ruby 使用Heroku上的Web包在Rails上做出反应-未使用CSS。-用于本地部署

我有一个应用程序，它使用React作为ruby上rails的前端。React组件使用现在随rails附带的Web包集成到rails中

版本： React版本16.8 ruby-2.6.3 轨道-5.2.3 纱线v1.17.3

未使用React css。这适用于default.css和PrimeReact包中的toi

路径位置为 应用程序 javascript css-用于Deafolt css img-用于从css引用的背景图像

PrimeReact通过package.json加载

{
 "name": "community-aid",
 "private": true,
 "dependencies": {
 "@babel/core": "^7.0.0-0",
 "@babel/preset-react": "^7.0.0",
 "@fortawesome/fontawesome-svg-core": "^1.2.19",
 "@fortawesome/free-brands-svg-icons": "^5.9.0",
 "@fortawesome/free-regular-svg-icons": "^5.9.0",
 "@fortawesome/free-solid-svg-icons": "^5.9.0",
 "@fortawesome/react-fontawesome": "^0.1.4",
 "@rails/webpacker": "^4.0.7",
 "actioncable": "^5.2.3",
 "axios": "^0.19.0",
 "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
 "bootstrap": "^4.3.1",
 "classnames": "^2.2.6",
 "core-js": "^3",
 "css-loader": "^2.1.1",
 "dotenv-webpack": "^1.7.0",
 "enzyme": "^3.10.0",
 "enzyme-adapter-react-16": "^1.14.0",
 "eslint": "^6.1.0",
 "file-loader": "^4.1.0",
 "final-form": "^4.18.2",
 "jquery": "^3.4.1",
 "moment": "^2.24.0",
 "popper.js": "^1.14.7",
 "primeicons": "^1.0.0",
 "primereact": "^3.1.7",
 "prop-types": "^15.7.2",
 "react": "^16.8.6",
 "react-bootstrap": "^1.0.0-beta.9",
 "react-dom": "^16.8.6",
 "react-file-reader": "^1.1.4",
 "react-file-reader-input": "^2.0.0",
 "react-final-form": "^6.3.0",
 "react-final-form-html5-validation": "^1.0.3",
 "react-moment": "^0.9.2",
 "react-router": "^5.0.1",
 "react-router-dom": "^5.0.1",
 "react-test-renderer": "^16.8.6",
 "react-transition-group": "^4.2.1",
 "resolve-url-loader": "^3.1.0",
 "store": "^2.0.12",
 "style-loader": "^0.23.1",
 "styled-components": "^4.3.2",
 "webpack": "^4.0.0",
 "webpack-cli": "^3.3.6"
},
 "devDependencies": {
  "babel-jest": "^24.8.0",
  "babel-preset-es2015": "^6.24.1",
  "jest": "^24.8.0",
  "webpack-dev-server": "^3.7.2"
 },
"jest": {
 "roots": [
   "spec/javascript"
 ],
 "moduleDirectories": [
  "node_modules",
  "app/javascript"
]

我已经检查了cssLoader是否在依赖项中，而不是devdependency中

请让我知道如何激活Heroku网站上的CSS，因为它在MacBook上运行良好

图像的位置 应用程序 javascript img park3.jpg

package.json

{
 "name": "community-aid",
 "private": true,
 "dependencies": {
 "@babel/core": "^7.0.0-0",
 "@babel/preset-react": "^7.0.0",
 "@fortawesome/fontawesome-svg-core": "^1.2.19",
 "@fortawesome/free-brands-svg-icons": "^5.9.0",
 "@fortawesome/free-regular-svg-icons": "^5.9.0",
 "@fortawesome/free-solid-svg-icons": "^5.9.0",
 "@fortawesome/react-fontawesome": "^0.1.4",
 "@rails/webpacker": "^4.0.7",
 "actioncable": "^5.2.3",
 "axios": "^0.19.0",
 "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
 "bootstrap": "^4.3.1",
 "classnames": "^2.2.6",
 "core-js": "^3",
 "css-loader": "^2.1.1",
 "dotenv-webpack": "^1.7.0",
 "enzyme": "^3.10.0",
 "enzyme-adapter-react-16": "^1.14.0",
 "eslint": "^6.1.0",
 "file-loader": "^4.1.0",
 "final-form": "^4.18.2",
 "jquery": "^3.4.1",
 "moment": "^2.24.0",
 "popper.js": "^1.14.7",
 "primeicons": "^1.0.0",
 "primereact": "^3.1.7",
 "prop-types": "^15.7.2",
 "react": "^16.8.6",
 "react-bootstrap": "^1.0.0-beta.9",
 "react-dom": "^16.8.6",
 "react-file-reader": "^1.1.4",
 "react-file-reader-input": "^2.0.0",
 "react-final-form": "^6.3.0",
 "react-final-form-html5-validation": "^1.0.3",
 "react-moment": "^0.9.2",
 "react-router": "^5.0.1",
 "react-router-dom": "^5.0.1",
 "react-test-renderer": "^16.8.6",
 "react-transition-group": "^4.2.1",
 "resolve-url-loader": "^3.1.0",
 "store": "^2.0.12",
 "style-loader": "^0.23.1",
 "styled-components": "^4.3.2",
 "webpack": "^4.0.0",
 "webpack-cli": "^3.3.6"
},
 "devDependencies": {
  "babel-jest": "^24.8.0",
  "babel-preset-es2015": "^6.24.1",
  "jest": "^24.8.0",
  "webpack-dev-server": "^3.7.2"
 },
"jest": {
 "roots": [
   "spec/javascript"
 ],
 "moduleDirectories": [
  "node_modules",
  "app/javascript"
]

} }

---

当我登录heroku托管的应用程序时，它的外观和行为应该与我的macbook上的站点相同。运行Thread init似乎解决了大多数问题，因此问题已经变为CSS不加载。编辑问题以反映。

您解决了这个问题吗？我也有同样的问题，解决方案是在RoR堆栈的客户机子目录中包含react代码。package.json上的脚本部分应该有一个启动react应用程序的命令。