在 less 文件中,我导入了两个不同的颜色代码变量,截至目前,我在生成其他导入时隐藏了 1 个导入。我想改变这种方法,比如使用 Javascript 进行一次导入并将我的无颜色文件动态传递给 less 文件。
最佳答案
如果您希望使用 Javascript 将变量传递给 less 文件,有两种方法:
- 您可以使用 javascript 注入(inject)具有更新的 CSS 变量/属性的 CSS 样式表,或者使用 javascript 直接设置 CSS 变量/属性。
- 提供 LESS 样式表并在运行时在用户浏览器中编译它们或使用
less.modifyVars
重新编译它们。启用 Less 变量的运行时修改。当使用新值调用时,Less 文件会在不重新加载的情况下重新编译。
简单的基本用法:
less.modifyVars({
'@buttonFace': '#5B83AD',
'@buttonText': '#D9EEF2'
});
更多详情:http://lesscss.org/usage/#using-less-in-the-browser-modify-variables
编辑:
如果你需要在 js 中导入你的 less 文件:
import '../less/style.less'
或者,如果你需要在父 less 文件中导入你的 less 文件:
@import "../less/style.less"
使用Mixins有条件的进口
@bt-color-variation: light;
@import "color-variations/@{bt-color-variation}/global";
@import "color-variations/@{bt-color-variation}/variables";
关于javascript - 用单个less文件生成多个主题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55410866/