How to setup LESS with React without Ejecting
Tags: react, webdev, css, less
Published: 2021-01-10 18:04:24

---
title: How to setup LESS with React without Ejecting
published: true
description: Implementing a LESS compiler into a Create React App project without ejecting
tags:
- react
- webdev
- css
- less
cover_image: https://isenselabs.com/files/uploads/less-mixins.jpg
---

**SASS** has been natively supported since React 16.7 with a single additional package **node-sass**. It can be easily integrated simply by adding **node-sass** and importing your pre-processed stylesheet.

```
// package.json

"dependencies": {
   "node-sass": "^5.0.0"
 }
...

// App.js
	
@import 'stylesheet.scss'

```

However, there is not such an easy solution to handle compiling **LESS** stylesheets. This is problematic because to manually configure webpack to compile our **LESS** stylesheets requires us to eject from the default **create-react-app** configuration. 

Ejecting is an irreversible process that can add frustrations in development down the line. You can alternatively use a package like **react-app-rewired** to slightly modify the webpack configs, but that requires rewiring all your run react scripts, and additionally, there may be unforeseen side effects down the line. That is a lot just to use **LESS** stylesheets in your app.

> Stuff can break. - [Dan Abramov](https://twitter.com/dan_abramov/status/1045809734069170176?lang=en)

So, if we decide to use **LESS** stylesheets in our app, let us see how to set it up with your react app, without having to eject from **create-react-app** and modifying your webpack config manually. 

You can take a look at the completed boilerplate setup [here](https://github.com/joefstack/cra-less-starter).

## Installing Our Packages

Let us begin with creating a new **create-react-app** project.

```
npx create-react-app less-boilerplate-demo
```

We will be implementing our compiler to watch the **LESS** file in our directory to export to our desired output directory. So each time our **LESS** file changes, the updates will reflect in real time for ease of development. We will first start by installing our packages for less and our compiler as dev dependencies.

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

## Setting up LESS Watcher Config

The **less-watcher-compiler** package takes a json file for configuration. Create a json file called less-watcher.config.json in our base directory. It can be setup to watch the relevant directories for edits and output directories to compile into. 

In this demo, we are just working with the base **create-react-app** boilerplate directories. So we will be watching our **src** directory and outputting back into the **src**. However, you can modify your config json file to input and output to match your project file structure. For more information, check out the [docs](https://www.npmjs.com/package/less-watch-compiler).

```
// less-watcher.config.json

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

For this demo, I will be adding an **App.less** directly into my **src** folder and changing two color variables to test the compiler.

```
// App.less

@app-primary: #0f3460;
@app-secondary: #e94560;

.App {
  text-align: center;
}

.App-logo {
  animation: App-logo-spin infinite 20s linear;
  height: 40vmin;
}

.App-header {
  background-color: @app-primary;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: @app-secondary;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
```

## Setting up Project Scripts

We want to run the compiler when we run our app start script in development. So let us install the **concurrently** package as a dev dependency so that we can run our compile script together with **react-scripts**. 

```
npm install concurrently --save-dev

```

Next, let us modify our start script in our **package.json** to run run our less compiler based on our configuration file when starting our development server.

```
// package.json

...

  "scripts": {
    "start": "concurrently --kill-others \"less-watch-compiler --config less-watcher.config.json\" \"react-scripts start\"",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  
...

```

## Congratulations!!

Now, when you run **npm start** you can make modifications to your less stylesheet file and see your edits in your app upon saving your file. If you want to take a look at the complete code, or create your own fork, check out my repo [here](https://github.com/joefstack/cra-less-starter).