Using LESS with create-react-app without ejecting 🤐

Easy setup Less popular LESS.

If you’re a fan of create-react-app (react official command line interface),
you probably know
it supports SASS by default (SOON). It’s ready & being included in the next release (

With less effort, you can use SASS or SCSS with CRA.

But what about LESS? Not that easy.

Why do you need LESS if CRA already supports SASS? 

I hope 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.

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´

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.

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:

to this:

4. Override Webpack config.

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


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 :

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.

If you missed something, you can check out this repo in Github:

PR’s welcome.

Check out my other article about how to create a contact form with react + php:

That’s all guys!

I hope this solution helps someone out. Thank you for reading. If you have any questions or remarks, leave a comment below.If you have any questions or remarks, leave a comment below.

Happy coding…. &$§!§!$Z/%/(!



What I learned from the book: The road to learn React

Sometimes I like to play around with programming books. This time I wanted to give the book “The road to learn React” a try. I can recommend this book to anyone who starts learning react. At the end of this book, you will create a clone of the Hackernews website. You can see and download my hackernews clone here. Please follow this post to see how to run this project. Feel free to create PR on Github.


what I learned:


  • create-react-app bootstraps a React application
  • JSX mixes up HTML and JavaScript to define the output of React components in their render methods
  • Components, instances, and elements are different things in React
  • ReactDOM.render() is an entry point for a React application to hook React into the
  • PropTypes let you define type checks for components
  • Jest allows you to write unit tests for your components DOM
  • Built-in JavaScript functionalities can be used in JSX * map can be used to render a list of items as HTML elements
  • Hot module to see changes in the browser without reloading
  • Use this.state and setState() to manage your internal component state
  • Pass functions or class methods to your element handler
  • Use forms and events in React to add interactions
  • Embrace controlled components
  • Compose components with children and reusable components
  • Usage and implementation of ES6 class components and functional stateless components
  • Approaches to style your components
  • ES6 class component lifecycle methods for different use cases
  • ComponentDidMount() for API interactions
  • Conditional renderings
  • Synthetic events on forms
  • Error handling
  • Aborting remote API request


  • Variable declarations with const and let can be used for specific use cases
  • Use const over let in React applications
  • Arrow functions can be used to keep your functions concise
    classes are used to define components in React by extending them
  • Functions that are bound to a class are class methods
  • Destructuring of objects and arrays
  • Default parameters
  • Template strings to compose strings
  • Spread operator for immutable data structures
  • Computed property names
  • Class fields
  • Import and export statements help you to organize your code


  • Higher-order functions
  • Hacker news api interaction
  • Native fetch browser API
  • Client and server- side search
  • Pagination of data
  • Client-side caching
  • Axios as an alternative for the native fetch API
  • Code organization allows you to scale your application with the best practices

code Playground location src/CodePlayground.js

How to start the repo

You can clone the github repo and cd to hackernews run – npm install npm start test run - npm test


Enjoy this blog? Please spread the word :)