Amid the COVID-19 outbreak, Folio3 aims to help clinics serve patients with telemedicine effectively.

Using LESS in React without Ejecting

Using LESS in React without Ejecting

Using LESS in React without Ejecting - Enterprise Blog folio3

I recently came across a problem while configuring my React application to use LESS styling. The misleading information on the web made the solution a bit tricky. So, after finding the appropriate solution, I decided to write this article.

Some background

CSS has always been an essential part of the Web. It brings order and color to the dull world of HTML. However, writing CSS can get very repetitive and little tasks such as having to look up hex color values, closing your tags, etc. can become time-consuming. To counter these problems, the CSS community developed CSS Preprocessors. With a CSS preprocessor you can:

  • Write cleaner CSS with more reusability
  • Structure your CSS so that it is easier to understand
  • Save time
  • Easy code maintenance with snippets and libraries
  • Write simple logics/calculations within your CSS

As an example take a look at the following LESS snippets

You can find more examples HERE.

There are a number of CSS preprocessors in the market but most used are these

Using LESS in React without Ejecting - Enterprise Blog folio3

Since LESS and SASS are not actually CSS, a browser cannot understand them. They need to be compiled to CSS before being served. In context of React, this is fine for production as compiling your LESS one time before production is not a problem. But in the development environment, where you make changes frequently, this can really get tedious and boring. Therefore, our problem comes down to avoiding/automating the compilation process each time we change our LESS/SASS.

The solution

Mostly React developers use ‘create-react-app’, a utility from Facebook, for setting up their react environment. With [email protected] and higher, React provides out of the box support for SASS.

To use SASS with your React application, all you have to do is add SASS dependencies

Then you can import your SASS stylesheet like this


However, there is no such solution for LESS, at the moment. So In this article we will focus on creating a solution for LESS. Actually, it’s better to call this a work-around instead, as it has some negative aspects, like having to import your LESS file (say “style.less”) like “style.css”.

To solve this problem, we will set up a LESS-CSS compiler to compile a LESS each time we make changes to the stylesheet and put the compiled CSS file into the exact same directory so that the user can use the compiled CSS file instead by just changing the extension from LESS to CSS while importing the stylesheet. Configuring webpack to do this is a headache as we have to “eject” before being able to make any configuration changes to the webpack. Ejection is an irreversible process that’s why developers avoid it. So we will not use this solution.

As a workaround, we can use a utility called less-watch-compiler. It can watch for LESS files in a source directory and compile them to CSS placing the output files into an output directory.

Add following dev-dependencies

Less-watch-compiler takes a config file as parameter


Here we are telling less-watch-compiler to watch all files in ‘src’ and its sub-directories for changes and if any file is changed, output the compiled CSS file into the same directory.

If we start this less-watch-compiler once we have to start our React server, every time we change any LESS file in our project, we will have an updated CSS file in the same directory. So, it is better if we start it in our “start” script. But since start script will also be used in production we create another script named ‘dev-start’. To run the react server concurrently with the less-watch-compiler we use a utility called ‘concurrently’.

Add concurrently to your dev-dependencies

Out dev-start script will be

The “–kill-others” flag means if any one of the two processes dies the other will be killed too.

THAT’S ALL. Change your “App.css” to “App.less” and start using LESS styling. Please note that we will import “App.css” instead of “App.less”. Your CSS file will always be up to-date, thanks to the less-watch-compiler.

A complete code for a sample project is available at

Please feel free to reach out if you have any questions. In case you need any help with development, installation, integration, up-gradation and customization of your Business Solutions. We have expertise in Enterprise Application Development Solutions. Connect with us for more information. [email protected]


USA408 365 4638


1301 Shoreway Road, Suite 160,

Belmont, CA 94002

Latest From Our Blog

Why the Daily Scrum is NOT a Status Meeting?

February 3, 2020
I am here today to debunk, The Myth “The Daily Scrum is the Status Meeting”. This is a key misconception in the industry and often resu...
Read more

A Complete Guide to Custom Caching in Magento 2...

November 29, 2019
In this blog, I will explain how to create your own cache in Magento 2, and how to read and write data from that custom cache. I hope after reading...
Read more

React Hooks

September 3, 2019
React is a javascript framework for building interactive client side interfaces along with the integration with back-end server. React considers th...
Read more