React + CSS Modules + LESS + Webpack 4

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:

  1. Install the following, using yarn or npm (you choose):
    npm i less less-loader style-loader css-loader -D
  2. 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!