DEV Community

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

Posted on • Edited 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

joanperamas profile image

Neumorphism: What It Is and CSS Examples

Joan Peramás Ceras -

tusharshahi profile image

The convenience of CSS's new @position-try

TusharShahi -

jetthoughts-dev profile image

Ruby on Rails 8: Custom Compression for Encrypted Data

JetThoughts Dev -

truongpx396 profile image

⚡🚀 ReactJS, TypeScript, Vite with Redux and TanStack (React Query) In Practice ⚛️

Truong Phung -