DEV Community

Cover image for Webpacker 6: CSS Loaders
Andrew Mason
Andrew Mason

Posted on • Updated on • Originally published at andrewm.codes

Webpacker 6: CSS Loaders

#rails #webpacker #tutorial #css

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
Enter fullscreen mode Exit fullscreen mode

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' %>
Enter fullscreen mode Exit fullscreen mode

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' %>
Enter fullscreen mode Exit fullscreen mode 
// app/javascript/packs/application.js

+ import "./application.css"
Enter fullscreen mode Exit fullscreen mode

Verify

Note: Make sure you restart the dev server!

Let’s create a new file for our CSS:

touch app/javascript/packs/application.css
Enter fullscreen mode Exit fullscreen mode

Next, add some CSS:

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

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

p {
  font-size: 1.2em;
}
Enter fullscreen mode Exit fullscreen mode

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

Changelog

Top comments (3)

Collapse
 
juanvqz profile image
Juan Vasquez • • Edited

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!

Collapse
 
bestfriend101 profile image
BestFriend101 •

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

Collapse
 
dixpac profile image
Dino • • Edited

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

Great writeup :)

Read next

baweaver profile image

Let's Read - Eloquent Ruby - Ch 21

Brandon Weaver -

kaja_uvais_a8691e947dd399 profile image

Image with text overlay using HTML and CSS

Kaja Uvais -

hax profile image

OWASP Juice-Shop Walkthrough Tutorial [ DOM XSS ]

haXarubiX -

acahuiche profile image

Angular: Getting Started

Alberto Cahuiche -