How to setup LESS with React without Ejecting

#react #webdev #css #less

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

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

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.

// 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.

Top comments (7)

soyIsaacDev • Dec 22 '22

Joseph thanks for your guide.

I would add things that might sound obvious but took me a little while to understand how to use it.

Open and save a file to configure less watcher in the root directory.
We name it --> less-watcher.config.json
paste the object explained in this step.

To use it in React there are 2 ways:

1.- Use it in our component as a module 
    a.- Save a file and add custom styles
            anyname.module.less
            b.- This file will be compiled to 
                        anyname.module.less
    d.- Import the css compiled file to the component and start using it.
            import s from "./anyname.module.css";
            <button className={s.butonStyle}> Aceptar</button>


2.- Import the css compiled file from our styles.less file to our component

                    route to file
    import gs from "../../../../styles.css"

    start using the styles as a global react css

        <!-- <button className="botonTransparente"> Aceptar</button>  -->

Restart the server to see changes.