Webpacker can't find stylesheets/application.css

Question

I am using Ruby on Rails with webpacker.

The webpacker setup runs just fine, I already installed jQuery, Bootstrap 4, and Font Awesome.

My webpacker directory currently looks like this:

app/javascript/packs/javascripts/application.js
app/javascript/packs/stylesheets/application.scss
app/javascript/packs/stylesheets/base.scss

In my application.html.erb file:

...
<%= javascript_pack_tag 'javascripts/application', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_pack_tag 'stylesheets/application' %>
...

In my application.js file:

import 'bootstrap/dist/js/bootstrap';

In my application.scss file:

$fa-font-path: '~font-awesome/fonts';
@import '~font-awesome/scss/font-awesome';
@import '~bootstrap/scss/bootstrap';
@import 'base';

I am currently putting my custom CSS in base.scss file and it works just fine.

I want to use a Bootstrap 4 Template more specifically this template PurpleAdmin. It has a custom CSS that has over 20K+ lines of code which you may see here.

Whenever I tried to copy and paste the CSS codes in my base.scss, webpacker raises an error Webpacker can't find stylesheets/application.css.

But I write my own CSS in the base.scss, it compiles just fine. I also tried putting the template's custom CSS in the sprockets (app/assets/stylesheets/base.scss) and it works just fine.

I also tried importing the CSS directly in my html.erb file like <link rel='stylesheet' href='http://www.bootstrapdash.com/demo/purple-admin-free/css/style.css'> and also works just fine.

Why doesn't it work using Webpacker? As I want to drop using sprockets from now.

This works for me https://stackoverflow.com/questions/58506351/webpacker-throws-application-css-not-found-in-manifest-json-in-rails-6-applica — Siva Ganesh, Oct 22 '19 at 15:25

score 0 · Accepted Answer · answered Nov 04 '18 at 12:49

It seems like the errors are coming from lines 17254-17280 of this file.

@font-face {
  font-family: 'ubuntu-light';
  src: url("../fonts/Ubuntu/Ubuntu-Light.eot");
  /* IE9 Compat Modes */
  src: url("../fonts/Ubuntu/Ubuntu-Light.woff2") format("woff2"), url("../fonts/Ubuntu/Ubuntu-Light.woff") format("woff"), url("../fonts/Ubuntu/Ubuntu-Light.ttf") format("truetype");
}

@font-face {
  font-family: 'ubuntu-regular';
  src: url("../fonts/Ubuntu/Ubuntu-Regular.eot");
  /* IE9 Compat Modes */
  src: url("../fonts/Ubuntu/Ubuntu-Regular.woff2") format("woff2"), url("../fonts/Ubuntu/Ubuntu-Regular.woff") format("woff"), url("../fonts/Ubuntu/Ubuntu-Regular.ttf") format("truetype");
}

@font-face {
  font-family: 'ubuntu-medium';
  src: url("../fonts/Ubuntu/Ubuntu-Medium.eot");
  /* IE9 Compat Modes */
  src: url("../fonts/Ubuntu/Ubuntu-Medium.woff2") format("woff2"), url("../fonts/Ubuntu/Ubuntu-Medium.woff") format("woff"), url("../fonts/Ubuntu/Ubuntu-Medium.ttf") format("truetype");
}

@font-face {
  font-family: 'ubuntu-bold';
  src: url("../fonts/Ubuntu/Ubuntu-Bold.eot");
  /* IE9 Compat Modes */
  src: url("../fonts/Ubuntu/Ubuntu-Bold.woff2") format("woff2"), url("../fonts/Ubuntu/Ubuntu-Bold.woff") format("woff"), url("../fonts/Ubuntu/Ubuntu-Bold.ttf") format("truetype");
}

Simply because I don't have these files locally and this causes the error. Removing the CSS with invalid sources does the job for me.

Webpacker can't find stylesheets/application.css

1 Answers1