Question

我有一个使用Webpack和Redux的ReactJs项目。我的样式表使用较少。在这个项目中，我有如下所示的colors.less文件-

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

此文件将导入到使用此变量的所有较少文件中。我想要的是根据一些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']
}

在您的入口点需要它。

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

1 个答案: