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

Asked 1/9, 2017 at 16:38 Answered 28/12, 2020 at 22:43

I am receiving this error when I try to load a page in my new rails 5.1 app using webpacker. I would like webpacker to handle CSS as well.

Started GET "/" for ::1 at 2017-09-01 12:20:23 -0400
Processing by HomeController#welcome as HTML
  Rendering home/welcome.html.erb within layouts/application
  Rendered home/welcome.html.erb within layouts/application (0.4ms)
Completed 500 Internal Server Error in 28ms



ActionView::Template::Error (Webpacker can't find application.css in /Users/myusername/Documents/testing-ground/myapp/public/packs/manifest.json. Possible causes:
1. You want to set wepbacker.yml value of compile to true for your environment
   unless you are using the `webpack -w` or the webpack-dev-server.
2. Webpack has not yet re-run to reflect updates.
3. You have misconfigured Webpacker's config/webpacker.yml file.
4. Your Webpack configuration is not creating a manifest.
Your manifest contains:
{
  "application.js": "/packs/application-1ba6db9cf5c0fb48c785.js",
  "hello_react.js": "/packs/hello_react-812cbb4d606734bec7a9.js"
}
):
     7:     <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
     8:     <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
     9:     <%= javascript_pack_tag 'application' %>
    10: <%= stylesheet_pack_tag 'application' %>
    11:   </head>
    12:
    13:   <body>

app/views/layouts/application.html.erb:10:in `_app_views_layouts_application_html_erb__1178607493020013329_70339213085820'

I am running the ./bin/webpack-dev-server alongside the rails server. I created the app using:

rails new myapp --webpack bundle bundle exec rails webpacker:install:react

I have a single CSS file app/javascript/src/application.css. (Writing that makes me feel something is wrong. Putting css inside of a javascript directory seems improper.)

I just have single root route defined root to: 'home#welcome'.

Here is app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>Myapp</title>
    <%= csrf_meta_tags %>

    <%= javascript_pack_tag 'application' %>
    <%= stylesheet_pack_tag 'application' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

Here is my config/webpacker.yml (I have tried also setting compile to false in development.

# Note: You must restart bin/webpack-dev-server for changes to take effect

default: &default
  source_path: app/javascript
  source_entry_path: packs
  public_output_path: packs
  cache_path: tmp/cache/webpacker

  # Additional paths webpack should lookup modules
  # ['app/assets', 'engine/foo/app/assets']
  resolved_paths: []

  # Reload manifest.json on all requests so we reload latest compiled packs
  cache_manifest: false

  extensions:
    - .coffee
    - .erb
    - .js
    - .jsx
    - .ts
    - .vue
    - .sass
    - .scss
    - .css
    - .png
    - .svg
    - .gif
    - .jpeg
    - .jpg

development:
  <<: *default
  compile: true

  dev_server:
    host: localhost
    port: 3035
    hmr: false
    https: false

test:
  <<: *default
  compile: true

  # Compile test packs to a separate directory
  public_output_path: packs-test

production:
  <<: *default

  # Production demands on precompilation of packs prior to booting for performance.
  compile: false

  # Cache manifest.json for performance
  cache_manifest: true

I don't want to add too many details up-front incase they are more distracting then helpful. Please ask for anything else and I'll add to my question. Thanks!

Matheny answered 1/9, 2017 at 16:38 Comment(2)

how did you solve this? – Hillinck 18/11, 2018 at 4:30

This may help anyone in the future #58506851 – Soybean 22/10, 2019 at 15:24

In your application.js :

import "path to application.css"

Gimp answered 8/9, 2017 at 7:4 Comment(3)

Great answer. It's amazing this isn't documented somewhere. – Sustentacular 19/2, 2019 at 21:36

This solve the problem also for me... but why I need to add this line in my application.js ?? – Carnet 18/3, 2019 at 11:3

You can check this out in the Webpacker docs here. – Nosy 20/4, 2020 at 22:57

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:

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

Hope that helps.

Amandy answered 6/12, 2018 at 12:20 Comment(2)

I also had to change the file extension to something other than .css (e.g. .scss). Otherwise Webpack would list it as .js in the manifest file. – Bongbongo 11/1, 2019 at 14:43

Man thank you for this! I just had to rename my file. It's now base.css – Gilemette 27/2, 2020 at 5:15

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.

Cattegat answered 14/10, 2018 at 5:19 Comment(0)

In "config/environments/production.rb":

config.public_file_server.enabled = true

Delete "public/assets" and "public/pack"

And run:

RAILS_ENV=production bundle exec rake assets:precompile

Nightmare answered 15/6, 2018 at 8:12 Comment(0)

I had the same problem and solved it with running yarn add postcss-smart-import in console.

upd: rails 5.2, webpacker 3.5, default config.

Lathery answered 6/8, 2018 at 12:0 Comment(0)

I had this problem or Rails 6.0.3.1. I updated the file app/assets/config/manifest.js

//= link_directory ../../javascript/packs
//= link_directory ../images

Then restart in your terminal:

bin/webpack-dev-server

Malvin answered 9/6, 2020 at 8:22 Comment(0)

I had such problem even with import "path/to/application.css" line in application.js

In my case it was because test assets was precompiled with different node version

node modules was installed with node version v12 but test assets was compiled with with node version v10

assets were compiled but when I've looked inside public/pack-test/application.[hash].js and grep application.scss I saw an error line about node-sass missing.

In my cause problem was with Rubymine IDE - it somehow cache $PATH value from time when I had default node version v10 in nvm.

I hope my store will have somebody, who will encounter similar issue in future.

Townscape answered 25/6, 2020 at 8:40 Comment(0)

Revise Insallation Guide

Revise the version of webpacker (in package.json and Gemfile.lock with git story) if had recent changes withou you concerns.

All major errors are fixed when you revise: installation official guide

For me, for example, after revised I needed to add some files in /packs/application.js, include this at the top of the file:

import 'core-js/stable'
import 'regenerator-runtime/runtime'

Mitziemitzl answered 15/12, 2020 at 17:59 Comment(0)

I cleared webpacker's cache and it started working again for me:

rm -rf tmp/cache/webpacker

Florio answered 28/12, 2020 at 22:43 Comment(0)

Revise Insallation Guide

Recommended topics

Hot tags