Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

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

Posted on • Edited on • Originally published atandrewm.codes

     

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 addcss-loader,style-loader, andmini-css-extract-plugin.

Install

yarn add css-loader style-loader mini-css-extract-plugin
Enter fullscreen modeExit fullscreen mode

Usage

Add astylesheet_packs_with_chunks_tag orstylesheet_pack_tag to the document head.

Make sure you restartbin/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 modeExit 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 modeExit fullscreen mode
// app/javascript/packs/application.js+ import "./application.css"
Enter fullscreen modeExit 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 modeExit 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 modeExit fullscreen mode

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

Changelog

Top comments(3)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss
CollapseExpand
 
juanvqz profile image
Juan Vasquez
404 bio not found
  • Email
  • Location
    Oaxaca, México
  • Work
    Software Engineer
  • Joined
• Edited on• 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!

CollapseExpand
 
bestfriend101 profile image
BestFriend101
  • Joined

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

CollapseExpand
 
dixpac profile image
Dino
A short bio.. 😊
  • Location
    Europe
  • Work
    CTO at Wizard Health
  • Joined
• Edited on• Edited

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

Great writeup :)

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

Andrew Mason is a full stack Ruby on Rails engineer and content creator in the Ruby community.
  • Location
    Phoenix, AZ
  • Education
    UNCW
  • Work
    Senior Product Engineer at Podia
  • Joined

More fromAndrew Mason

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp