stylesheet_pack_tag not finding app/javascript/src/application.css in rails 5.1 with webpacker gem

In your application.js :

import "path to application.css"

I had this exact problem, on Rails 5.2 with Webpack's current version as of Dec 5, 2018 (4.2.x?) and just resolved it.

The fix for me was renaming application.css to anything else. I think there was a naming collision with Webpack.

So now my pack tags look like:

<%= stylesheet_pack_tag 'styles', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

I did NOT need to import the stylesheet inside application.js. This appears to make no difference for me.

OPTIONAL BONUS: I also renamed the app/javascript to app/webpack because I also thought it was confusing to run styles out of a Javascript directory (and learned from this youtube video that it could be done: https://www.youtube.com/watch?v=I_GGYIWbmg0&feature=youtu.be&t=32m35s). Simply:

  1. Rename the directory to app/webpack
  2. Adjust webpacker.yml like so: source_path: app/webpack

Hope that helps.


When HMR is set to false the styles are inlined within the bundle so you won't get any css bundle. In your webpacker.yml file, setting hmr to true should fix your problem. I realize this is an old question. Relevant, though.