DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป is a community of 963,274 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for How to setup LESS with React without Ejecting
Joseph Chow
Joseph Chow

Posted on

How to setup LESS with React without Ejecting

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'

Enter fullscreen mode Exit fullscreen mode

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

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.

Installing Our Packages

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

npx create-react-app less-boilerplate-demo
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.

// less-watcher.config.json

{
  "watchFolder": "src/",
  "outputFolder": "src/",
  "sourceMap": true,
  "runOnce": false,
  "enableJs": true
}
Enter fullscreen mode Exit fullscreen mode

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);
  }
}
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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"
  },

...

Enter fullscreen mode Exit fullscreen mode

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.

Top comments (4)

Collapse
 
sincenir profile image
Sincenir

does this cause additional css files?

Collapse
 
krisgardiner profile image
Kris Gardiner

It outputs css files from your less files

Collapse
 
gurugumawaru profile image
Peter Krevenets

Thanks, it was useful for me

Collapse
 
sunnipaul profile image
sunnipaul

Thank you for sharing this.

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. ๐Ÿ›