Rails Webpacker 3.0 import CSS file is not working Rails Webpacker 3.0 import CSS file is not working ruby-on-rails ruby-on-rails

Rails Webpacker 3.0 import CSS file is not working


I had a similar problem just now and found a solution. Hopefully this helps someone else.

I'm using webpacker 3.4.3. It uses the extract-text-webpack-plugin to auto-generate a CSS pack containing the imported styles. It takes the same name as your JS pack. So if your JS pack is hello_react.jsx, and in it you import some CSS like so: import "./Hello.css";, the styles in Hello.css are included in a CSS pack called hello_react.css. In your Rails view you can add something like <%= stylesheet_pack_tag('hello_react.css') %>, and the styles should work.

For more info, see the Link styles from your Rails view section of the Webpacker CSS docs.