时间戳

首页 > 解决方案 > 在 Heroku 上使用 webpack 在 Rails 上做出反应 - 未使用 CSS。- 适用于本地部署

ruby - 在 Heroku 上使用 webpack 在 Rails 上做出反应 - 未使用 CSS。- 适用于本地部署

问题描述

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

版本：React 版本 16.8 ruby​​-2.6.3 rails - 5.2.3 yarn v1.17.3

不使用反应 css。这适用于 default.css 和 PrimeReact 包。

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

PrimeReact 通过 package.json 加载

我检查了 cssLoader 是否在依赖项中，而不是在 devDependencies 中。

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

图像应用程序 javascript img park3.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 上的站点相同

标签： rubyreactjsherokuwebpackdeployment

解决方案

Running yarn init seems to resolved most of the issues so the question has has changed to simply CSS not loading. Editing the question to reflect.

推荐阅读