Style of React component is not working on Heroku

Question

index.jsx

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

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

I deployed a Rails app(Rails + React.js) on Heroku.

But styles of react-date-range component are not loaded on Heroku even it is working on local.

What is the way to fix this issue?

Answer 1

Obviously, you're using Webpack and you have configs for loading CSS, instead of using index.jsx add these two pre-compiled CSS into your root of CSS by this:

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

If the url function doesn't work try without it:

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

If these two guys aren't in your final bundle file, simply, use relative path, because it is a little hard to add Webpack configuration that Webpack understand node_modules absolute path of libraries inside css-loader.

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