React 组件的样式不适用于 Heroku答案

【问题标题】：Style of React component is not working on HerokuReact 组件的样式不适用于 Heroku
【发布时间】：2020-04-28 07:46:54
【问题描述】：

index.jsx

import 'react-date-range/dist/styles.css'

import 'react-date-range/dist/theme/default.css'

我在 Heroku 上部署了 Rails app(Rails + React.js)。

但是react-date-range 组件的样式没有加载到 Heroku 上，即使它在本地工作。

解决这个问题的方法是什么？

【问题讨论】：

【解决方案1】：

这是一个部分解决方案，因为它让事情对我有用，但不是以理想的方式：

config/application.rb

  # Add node_modules to assets paths
  config.assets.paths << Rails.root.join("node_modules")

application.scss（或任何其他 scss 文件）

  // will import from node_modules/react-widgets
  @import "react-widgets/dist/css/react-widgets.css"

config/environments/production.rb

  # Fallback to assets pipeline if a precompiled asset is missed.
  config.assets.compile = true

这些更改将使事情在 heroku 上运行，但它在生产中重新编译，这不是很好。理想情况下，您可以改为链接 react-widgets.min.css 或类似的东西，但我无法弄清楚。

【讨论】：

【解决方案2】：

显然，您使用的是Webpack，并且您有用于加载 CSS 的配置，而不是使用 index.jsx，通过以下方式将这两个预编译的 CSS 添加到您的 CSS 根目录中：

@import url("react-date-range/dist/styles.css");
@import url("react-date-range/dist/theme/default.css");

如果url 函数不起作用，请尝试不使用它：

@import "react-date-range/dist/styles.css";
@import "react-date-range/dist/theme/default.css";

如果这两个家伙不在你的最终包文件中，简单地使用相对路径，因为在css-loader 中添加Webpack 可以理解的Webpack 配置node_modules 库的绝对路径有点困难。

@import "../node_modules/react-date-range/dist/styles.css";
@import "../node_modules/react-date-range/dist/theme/default.css";

【讨论】：