How can I recompile LESS manually in reactjs?

Question

I have a ReactJs project which uses Webpack and Redux. I am using less for my stylesheets. In this project, I have colors.less file which looks like this -

//colors.less
@color1: red;
....

This file is imported to all the less files who are using this variable. What I want is change this @color1 variable according to some API data and then the stylesheets should update with the new color. I have access to the this variable in my JS file, but on changing this color I want to reload the stylesheets as well.

Accessing the variable like below -

//utils/less-var-loader.js
const lessToJs = require('less-vars-to-js')

module.exports = function(content) {
    return `module.exports = ${JSON.stringify(lessToJs(content))}`
}

//some.js which wants to modify the color
import * as styles from '!!../utils/less-var-loader!./common/colors.less'
styles['@color1'] = blue;

Answer 1

First add the below dependencies for webpack.

Add the less dependencies

webpack.config.js

,{
  test: /\.less$/,
  loaders: ['style', 'css', 'less']
}

Require it at your entry point.