Javascript 如何在reactjs中减少手动重新编译？

我有一个使用Webpack和Redux的ReactJs项目。我使用更少的样式表。在这个项目中，我有colors.less文件，看起来像这样-

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

此文件将导入到所有使用此变量的less文件中。 我想要的是根据一些API数据更改这个@color1变量，然后样式表应该用新的颜色更新。我可以访问JS文件中的this变量，但是在更改此颜色时，我也想重新加载样式表

访问变量，如下所示-

//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;

---

首先为webpack添加以下依赖项

webpack.config.js

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

---

在您的入口点需要它。

它已经在那里了。但是我需要重新编译更少的文件，每次文件上的更改都会重新编译它。