I recently came across a problem while configuring my React application to use LESS styling. The misleading information on the web made the solution a bit tricky. So, after finding the appropriate solution, I decided to write this article.

Some background

CSS has always been an essential part of the Web. It brings order and color to the dull world of HTML. However, writing CSS can get very repetitive and little tasks such as having to look up hex color values, closing your tags, etc. can become time-consuming. To counter these problems, the CSS community developed CSS Preprocessors. With a CSS preprocessor you can:

• Write cleaner CSS with more reusability
• Structure your CSS so that it is easier to understand
• Save time
• Easy code maintenance with snippets and libraries
• Write simple logics/calculations within your CSS

As an example take a look at the following LESS snippets

// variables
@width: 10px;
@height: @width + 10px;

// code structure
#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: @width;
    height: @height;
  }
}

// Mix-ins (reusability)
.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #111;
  .bordered();
}
.post a {
  color: red;
  .bordered();
}

You can find more examples HERE.

There are a number of CSS preprocessors in the market but most used are these

• Sass
• Less
• Stylus

Since LESS and SASS are not actually CSS, a browser cannot understand them. They need to be compiled to CSS before being served. In context of React, this is fine for production as compiling your LESS one time before production is not a problem. But in the development environment, where you make changes frequently, this can really get tedious and boring. Therefore, our problem comes down to avoiding/automating the compilation process each time we change our LESS/SASS.

The solution

Mostly React developers use ‘create-react-app’, a utility from Facebook, for setting up their react environment. With [email protected] and higher, React provides out of the box support for SASS.

To use SASS with your React application, all you have to do is add SASS dependencies

"dependencies": {
   "node-sass": "^4.11.0"
 }

Then you can import your SASS stylesheet like this

@import 'stylesheet.scss'

However, there is no such solution for LESS, at the moment. So In this article we will focus on creating a solution for LESS. Actually, it’s better to call this a work-around instead, as it has some negative aspects, like having to import your LESS file (say “style.less”) like “style.css”.

To solve this problem, we will set up a LESS-CSS compiler to compile a LESS each time we make changes to the stylesheet and put the compiled CSS file into the exact same directory so that the user can use the compiled CSS file instead by just changing the extension from LESS to CSS while importing the stylesheet. Configuring webpack to do this is a headache as we have to “eject” before being able to make any configuration changes to the webpack. Ejection is an irreversible process that’s why developers avoid it. So we will not use this solution.

As a workaround, we can use a utility called less-watch-compiler. It can watch for LESS files in a source directory and compile them to CSS placing the output files into an output directory.

Add following dev-dependencies

"devDependencies": {
   "less": "^3.9.0",
   "less-watch-compiler": "^1.13.0"
 }

Less-watch-compiler takes a config file as parameter

{
   "watchFolder": "src/",  
   "outputFolder": "src/",  
   "sourceMap": true,
   "runOnce": false,
   "enableJs": true
}

Here we are telling less-watch-compiler to watch all files in ‘src’ and its sub-directories for changes and if any file is changed, output the compiled CSS file into the same directory.

If we start this less-watch-compiler once we have to start our React server, every time we change any LESS file in our project, we will have an updated CSS file in the same directory. So, it is better if we start it in our “start” script. But since start script will also be used in production we create another script named ‘dev-start’. To run the react server concurrently with the less-watch-compiler we use a utility called ‘concurrently’.

Add concurrently to your dev-dependencies

"devDependencies": {
   "concurrently": "^4.1.0"
}

Out dev-start script will be

"dev-start": "concurrently --kill-others \"less-watch-compiler --config less-watcher.config.json\" \"react-scripts start\""

The “–kill-others” flag means if any one of the two processes dies the other will be killed too.

THAT’S ALL. Change your “App.css” to “App.less” and start using LESS styling. Please note that we will import “App.css” instead of “App.less”. Your CSS file will always be up to-date, thanks to the less-watch-compiler.

A complete code for a sample project is available athttps://github.com/sferhan/less-react-sample

Please feel free to reach out if you have any questions. In case you need any help with development, installation, integration, up-gradation and customization of your Business Solutions. We have expertise in Enterprise Application Development Solutions. Connect with us for more information. [email protected]