How to hot reload less when using modifyvars

Question

Currently I am using less-loader along with modifyVars to overwrite some less variables in order to customize the styling.

in my webpack.config.js

import theme from './theme.js';

{
        test: /\.(css|less)$/,
        loaders: ['style', 'css?sourceMap', 'postcss', `less-loader?{"sourceMap":true,"modifyVars":${JSON.stringify(theme)}}`],
      },

but for every change in theme.js I have to restart the server, (doing npm run ) is there a way to make it automatically just like if I change a less file and it will replaced immediately?

theme.js

module.exports = {
  '@primary-color': '#1DA57A',
  '@font-size-base': '14px',
  '@btn-font-weight': '200',
};

Answer 1

It you cannot due to this currently open issue, "we need to accept a {Function} for modifyVars and handle it inside the loader".