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

问题

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 application.js and application.css looks like

packs/application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")

import '../stylesheets/application'
import './bootstrap_custom.js'
import './side_menu.js.erb'
//import './sweetalert.js'
import './business_hours.js'
import './admin.js'
import './services.js'
import './user_service.js'

Packs/stylesheets/application.scss

@import './bootstrap_custom.scss';

$fa-font-path: '~@fortawesome/fontawesome-free/webfonts'; 
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import './admin_dashboard.scss';
@import './side_menu.css';
@import './fonts.scss'; 
@import './login.css';

回答1:

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

回答2:

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.

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

来源：https://stackoverflow.com/questions/58506351/webpacker-throws-application-css-not-found-in-manifest-json-in-rails-6-applica

标签

ruby-on-rails

webpacker

ruby-on-rails-6