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.
Top comments (3)
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!
Shouldn't you also explain how to actually load the CSS loaders into Webpacker?
yarn add postcss-cssnextgIn order for tailwind
@applyto workGreat writeup :)