Webpacker throws application.css not found in manifest.json in *Rails 6* application

Question

Currently we use Rails 6 for our application. It\'s working fine in production but in development mode it throws some errors. Please assist me.

This is how my applic

Answer 1

After a long struggle I found a solution for this. Thanks @ahmed kamal.

Multiple packs with the same name but a different extension.

i.e: application.scss and application.js only the last one will make it to the webpack entry path configuration.

I have explained my scenario in the blog here - Rails 6 - Webpacker

Solution:

 1. Rename stylesheets/application.scss into stylesheets/style.scss
 2. Import style.scss in application.js like this import '../stylesheets/style'
 3. config/webpacker.yml make below changes
      compile: true
      cache_manifest: true
      extract_css: true

Thats all its started working fine for me

Answer 2

As per recently commit in Rails, the official fix is:

1. create an empty file in app/javascript/packs/application.css

   $ touch rebloom/app/javascript/packs/application.css
   

2. change all environments from extract_css: false to extract_css: true in config/webpacker.yml

   $ ruby -pi -e "sub(/extract_css: false/, 'extract_css: true')" config/webpacker.yml
   

3. change hmr and inline to true for the dev_server in development in config/webpacker.yml (NOTE: the following commands work assuming that you don't have custom settings. In case, please update the file manually)

   $ ruby -pi -e "sub(/hmr: false/, 'hmr: true')" config/webpacker.yml
   $ ruby -pi -e "sub(/inline: false/, 'inline: true')" config/webpacker.yml`
   

IMPORTANT

In case you followed other instructions, be sure you didn't change compile to true for the production mode in config/webpacker.yml This would negatively affect the performance of your application in production mode and it's not necessary. You just need to precompile the assets using

$ bundle exec rake assets:precompile

Answer 3

I think you should import './stylesheets/application' with just one dot because the stylesheets directory is on the same level as your application.js.

Plus, I think it's recommended to only includes packs in the pack directory, and the rest will be one level before it, like this:

app/javascript
├── stylesheets
|   └── application.css
├── channels
└── packs
    └── application.js

and if you did that you should use two dots again '../stylesheets/application'

and make sure you configure the webpacker to extract CSS, in webpacker.yml :

extract_css: true

Answer 4

Check the directory names to make sure they aren't conflicting with Webpacker's output. In my case, Rails was unable to find application.css even though Webpacker had successfully compiled it.

// Webpacker log output
Asset                         Size       Chunks       Chunk Names
application.js                3.62 MiB   application  [emitted]              application
css/application-631a168a.css  332 KiB    application  [emitted] [immutable]  application

My relevant directory structure:

app/javascript
|——packs
|  └——application.js
└——src
   └——assets
      |——css
      └——scss
         └——application.scss

In my case, the problem was that I already had a directory named css, so when Rails went to look for the compiled css/application.css, it went to this directory instead of the one generated by Webpacker and wasn't able to find application.css.

Deleting the conflicting directory fixed it:

$ rm -rf app/javascript/src/css // change path appropriately