用更少的文件生成多个主题

Question

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

Answer 1

如果您希望使用Javascript将变量传递到较少的文件，则有两种方法：

1. 您可以使用javascript注入具有更新后的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'

或者，如果您需要将更少的文件导入到父更少的文件中：

@import "../less/style.less"

使用Mixins进行条件导入

@bt-color-variation: light;

@import "color-variations/@{bt-color-variation}/global";
@import "color-variations/@{bt-color-variation}/variables";