React – How to integrate Less with React app

Installation

Install less, less-watch-compiler, and concurrently npm packages.

npm install less less-watch-compiler concurrently --save-dev

concurrently runs multiple commands concurrently.
concurrently is npm run less & npm run less-watch-compiler.

Configuration

1. Create less.config.json file.

{
"watchFolder": "src/",
"outputFolder": "src/",
"sourceMap": true,
"runOnce": false,
"enableJs": true
}

2. Update package.json file.

"start": "concurrently --kill-others \"less-watch-compiler --config less.config.json\" \"react-scripts start\"",

Usage

Create and use *.less files for CSS but import *.css files in React components. *.css files will be generated automatically after *.less files save action in the same folders where *.less files are located.

Run React project.

npm start

• Share on Facebook