javascript - 用单个less文件生成多个主题

Question

在 less 文件中，我导入了两个不同的颜色代码变量，截至目前，我在生成其他导入时隐藏了 1 个导入。我想改变这种方法，比如使用 Javascript 进行一次导入并将我的无颜色文件动态传递给 less 文件。

Answer 1

如果您希望使用 Javascript 将变量传递给 less 文件，有两种方法:

1. 您可以使用 javascript 注入(inject)具有更新的 CSS 变量/属性的 CSS 样式表，或者使用 javascript 直接设置 CSS 变量/属性。
2. 提供 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";