Watch specific file changes using webpack

Question

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

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

The theme is not a file webpack watches and packs. It is part of the webpack config. So the answer is no, you can't make webpack watch it.

You can, however, make someone else watch it and restart webpack. As described here, for example.