Rails 6 with Webpacker & SCSS not working

Question

I am having two separate issues (or maybe they are combined and I'm missing it). The app was picking up the bootstrap styles, but is no longer doing so.

Issue 1

When I make any updates to application.js no matter how small (an extra line break anywhere in the file) it would kill the imported bootstrap files.

Now I can't get the bootstrap styles to show period.

Issue 2

When I put the following into the head tag in application.html.erb:

<!-- before -->
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<!-- after -->

It renders no output to the browser:

<!-- before -->

<!-- after -->

I'm uncertain if this is a Webpacker issue or what is causing this. Please let me know if any other details are required.

I have a full repo here that you can clone / browse with instructions for bringing up the dev environment with Docker.

You can check it out here: Funtime Github repo

Answer 1

Webpacker is not configured to extract any css.

1. Set extract_css: true in webpacker.yml. Setting this to true will extract any css you import in js files under /packs to separate css files. In your case any css imported in application.js will be available in application.css. If you had a pack called test, the css will be extracted to test.css.

2. Move out application.scss from packs to /css (or stylesheets, whatever you want)

3. Update application.js like this:

import "./../css/application";
import Rails from "@rails/ujs";
....

4. Make sure you start webpacker dev server with bin/webpacker-dev-server.

Here's how it looks like:

Answer 2

With Shakapacker:

app/javascript:
├── packs:
│   # only webpack entry files here
│   └── online_giving.js
│   └── online_giving.scss
└── src:
│   └── my_component.js
└── stylesheets:
│   └── my_styles.css
└── images:
  └── logo.svg

And in the app/views/layouts/mylayout.html.haml :

= javascript_pack_tag 'online_giving'
= stylesheet_pack_tag 'online_giving' 

you don't need to import the online_giving.scss in the online_giving.js file, Shakapacker will find it.