Webpacker 6: CSS Loaders

This page has changed since first posted, refer to the changelog at the bottom.

In order to process .css files with Webpacker 6, you need to add css-loader, style-loader, and mini-css-extract-plugin.

Install

yarn add css-loader style-loader mini-css-extract-plugin

Usage

Add a stylesheet_packs_with_chunks_tag or stylesheet_pack_tag to the document head.

Make sure you restart bin/webpack-dev-server after installing new loaders.

Style Loader Example

<%# app/views/layouts/application.html.erb %>

+ <%= stylesheet_packs_with_chunks_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_packs_with_chunks_tag 'application', 'data-turbolinks-track': 'reload' %>

Extract Example

<%# app/views/layouts/application.html.erb %>

<%= javascript_packs_with_chunks_tag 'application', 'data-turbolinks-track': 'reload' %>
+ <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

// app/javascript/packs/application.js

+ import "./application.css"

Verify

Note: Make sure you restart the dev server!

Let’s create a new file for our CSS:

touch app/javascript/packs/application.css

Next, add some CSS:

/* app/javascript/packs/application.css */

h1 {
  font-size: 2.2em;
  color: #2563eb;
}

p {
  font-size: 1.2em;
}

Reload your browser and your styles should be applied now, and the Webpacker loader error should be gone.

Changelog

• chore: add css-minimizer-webpack-plugin

Comments

[Juan Vasquez]

I didn't receive errors from the prev step, without installing those libs
(I'm on webpacker 6.0.0.pre.2)

EDIT:
I rollback changes and tried without install those packages and it didn't work, so yes, we need them.

Thank you!

[BestFriend101]

Shouldn't you also explain how to actually load the CSS loaders into Webpacker?

[Dino]

yarn add postcss-cssnextg
In order for tailwind @apply to work

Great writeup :)