Webpacker 6: CSS Loaders
Andrew Mason
Updated Feb 16th, 2021
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
- Series
- webpacker-6
- Previous
- Webpacker 6: PostCSS Loaders
- Questions
- on GitHub Discussions↗
- Discuss
- on Twitter↗
- Updated On
- Feb 16th, 2021
- Published On
- Dec 23rd, 2020
- Word Count
- 241 words
- Reading Time
- 1 min read