ruby - 在 Heroku 上使用 webpack 在 Rails 上使用react - 未使用 CSS。 - 适用于本地部署

Question

我有一个应用程序使用 React 作为 ruby​​ 上的 rails 的前端。 React 组件使用现在随 rails 一起提供的 webpack 集成到 rails。

版本: react 版本 16.8 ruby -2.6.3轨道 - 5.2.3 yarn v1.17.3

没有使用 React CSS。这适用于 default.css 和 PrimeReact 包。

路径位置是应用程序 javascript css - 对于默认的 css img - 用于从 css 引用的背景图像

PrimeReact 通过 package.json 加载

我已经检查过 cssLoader 在依赖项中，而不是在 devDependencies 中。

请告诉我如何在 Heroku 站点上激活 CSS，因为它在 MacBook 上运行良好。

图片位置 应用程序 javascript 图片 公园3.jpg

包.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 上的站点相同

Answer 1

运行 yarn init 似乎解决了大部分问题，因此问题已更改为简单的 CSS 未加载。编辑问题以反射(reflect)。