如何在 reactjs 中手动重新编译 LESS？

Question

我有一个使用 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;

Answer 1

首先为 webpack 添加以下依赖项。

Add the less dependencies

webpack.config.js

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

在你的入口点需要它。