javascript - 如何在 reactjs 中手动重新编译 LESS?
问题描述
我有一个使用 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']
}
在您的入口点需要它。
推荐阅读
- apache-spark - Azure DataBricks Stream foreach 失败并出现 NotSerializableException
- javascript - Vue:offsetTop 总是返回 0
- angular - 自定义 Angular webpack 配置,并非所有选项都能正常工作
- maven - 如何修复maven surefire插件错误[分叉过程中有错误]?
- php - php pdo 执行失败并出现执行错误
- javascript - 如何在Javascript中添加前面带0的数字?
- python - 在 Gurobi Python 中向目标函数添加多个二次项
- excel - 根据一系列条件删除行(复数)
- laravel - Travis CI:从 PHPUnit 和 Laravel Dusk 拆分构建
- ionic-framework - 来自特定页面的 Ionic 4 导航