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-pluginUsage
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' %>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.cssNext, 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
Top comments(3)
- Email
- LocationOaxaca, México
- WorkSoftware Engineer
- Joined
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!
yarn add postcss-cssnextg
In order for tailwind@apply to work
Great writeup :)
For further actions, you may consider blocking this person and/orreporting abuse
