How to use LESS preprocessor in React’s create-react-app

Using LESS or SASS has become the de facto standard for front end development and React is the preferred frontend framework these days. A question is asked frequently on how we can enable LESS/SASS/STYLUS in React project. The easiest way to do it is using custom-react-scripts. This adds the support for SASS/LESS/STYLUS and decorators in a react app.

1. Install  create-react-app custom-react-scripts globally

   npm i -g create-react-app custom-react-scripts
   

2. Create a new react app  create-react-app custom-react-scripts globally

   create-react-app <your_app_name> —-scripts-version custom-react-scripts
   

This will create the app with LESS supported in it. Their are few examples created in the App code which you can explore more to know how to use it. Happy Reacting!!