Using LESS with create-react-app without Ejecting

If you’re a fan of create-react-app (React’s official command line interface), you probably know it should support SASS by default. This feature is ready and will be included in the next release of the project. So, using SASS or SCSS with CRA should be rather simple.

But, what happens when you want to use LESS as your styling method? Will this still work? Can we make it work?

In this post, I’ll teach you how to combine create-react-app with LESS without having to eject.

Why use LESS when SASS is supported?

I assume you already know the difference between SASS & LESS.

There are lots of discussions about LESS and SASS, I’m not going to dive deeply into this topic. There could be many reasons to use LESS, but my personal experience was, I wanted to use a framework written in LESS.

If you want to override some variables or mixins of a LESS framework, the best way is overriding it with your own LESS file. For this, you need to make LESS work with React.

OK, guys. Enough talking, let’s make it work! 💪

Less with create-react-app (CRA)

Down to the business.

1. Create a basic app using CRA

I’m gonna create a simple app for this tutorial. I’ll call it react-with-less. Run this in your CLI : ´create-react-app react-with-less´

alt text

Then run npm start, it will open your browser in the port 3000 http://localhost:3000/

2. Using create-react-app’s custom config solution: react-app-rewired.

⚠️ react-scripts-rewired doesn’t apply to CRA > = 2 ( Adonandal Thanks for pointing this out )

As of Create React App 2.0 this repo is “lightly” maintained mostly by the community at this point.

⚠️ Note from the repo:

By doing this you’re breaking the “guarantees” that CRA provides. That is to say you now “own” the configs. No support will be provided. Proceed with caution.

“Stuff can break” — Dan Abramov https://twitter.com/dan_abramov/status/1045809734069170176

In your terminal run: npm install react-app-rewired — save. After installing react-app-rewired successfully we need to change scripts field in package.json.

Open up the project with your favorite code editor. Mine is VS Code. 😻

3. Updating package.json

Change the script field in package.json from this:

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
},

to this:

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
}
4. Override Webpack config

Create a file called config-overrides.js in the root folder and add this content.

module.exports = function override(config, env) {
    //Override config here. 
    return config;
};
5. Using less loader, react-app-rewire-less

Back in the terminal install the rewire-less package. Run ´ npm install react-app-rewire-less´ in the terminal.

6. Updating config-overrides.js with rewire-less

If you successfully installed react-app-rewire-less, we can start updating config-overrides.js. So, open up config-overrides.js and first import the rewire-less package:

const rewireLess = require(‘react-app-rewire-less’);

Then we can override config like this :

const rewireLess = require('react-app-rewire-less');

module.exports = function override(config, env) {
    
    config = rewireLess.withLoaderOptions({
            javascriptEnabled: true,
    })(config, env);
    
    return config;
};
7. Styling with LESS 🤴🏼

Hi5 guys, Now you are officially a Less person. But wait. We haven’t used it yet. Let’s go back to the code editor and delete App.css file. Now open up App.js file.

In the top of the file you can see import ‘./App.css’;. Change it to

import./App.less’;

Then create the less file in the same directory. Open up App.less File and add some css for testing. I’m gonna change the body background color:

body {
background: #000;
}

Go back to terminal and run npm start. Tadaaaa! Now you can see your changes in the browser. That’s it.

Conclusion

So that’s is. If you want to use LESS with create-react-app, now you know how, so that shouldn’t stop you. Feel free to comment below and ask me anything, suggest additions or add something I might have missed. You can check out this repo in Github:

https://github.com/malithmcr/cra-with-less PR’s welcome.

That’s all guys! Happy coding…

Share This:

CraftCode On Instagram

Get The Best Of All Hands Delivered To Your Inbox

Subscribe to our newsletter and stay updated.