← Back

Webpacker 6: CSS Loaders

Andrew Mason

Andrew Mason

Published Dec 23rd, 2020

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

Thanks for reading! You can discuss this post using one of the links below. Additionally, it would mean a lot if you shared this post with others!

Recent Posts