How to import less file in react?

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.

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.

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

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.

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.

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

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.

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.

look at the return value of exported function(that's the main config)

find where last style-loader added which is sass-loader

and add less-loader under sass-loader like this:

importLoaders option inside less-loader should be 3.

two loaders from getStyleLoaders + our less-loader.

if you want to use stylesheet file like this:

you should set modules: true

• Install LESS / CSS webpack loaders into your React project.
• Create global LESS / CSS stylesheet for your React app.
• Add module rules to your React webpack config.
• Import global LESS / CSS stylesheet into main React entry file.