Introduction
I was fiddling around with a new React project today, using the latest and greatest of everything: React v3, Webpack 4, &c. What I wanted to do was setup my app to use CSS Modules. However, I didn’t want to use plain CSS. I wanted to use LESS. I was surprised by how simple it was.
Setup & Configuration
I’m assuming that you already have a basic app using React, Babel, and Webpack. If you need help with setting up React, Babel and Webpack, read this article. It’s is a little out of date — specifically in regards to Webpack 4 — but it’s a good place to start. To read up on Webpack 4, read this article by Webpack’s Sean Larkin.
Setup and configuration of LESS + CSS Modules in Webpack 4 involves two steps:
- Install the following, using yarn or npm (you choose):
npm i less less-loader style-loader css-loader -D - Update your webpack.config.js as follows:
That’s it!
To test it out, create a LESS file:
Then, consume it as a CSS Module in a React component:
Pretty simple, eh? Enjoy!
