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.