来自不同来源的 LESS 变量答案

【问题标题】：LESS variables from differrent source来自不同来源的 LESS 变量
【发布时间】：2019-01-09 21:51:57
【问题描述】：

我有一组 .less 文件

这些都是在 theme.less 中导入的，喜欢这个

@import "a.less"; @import "b.less"; @import "c.less";

并编译为 theme.css

我少了 2 个文件，这些文件定义了具有不同值的相同变量。

vars_blue.less vars_green.less

这是为了主题。 a.less,b.less & c.less 引用这些变量。如果我在上述 3 个更少的文件中导入 vars_blue.less，我会得到蓝色主题。

我正在尝试创建一个动态主题，但避免在上述 3 个文件中包含变量，而不是在 theme.less 中

@import "vars_blue.less"; @import "a.less"; @import "b.less"; @import "c.less";

由于不支持上述 3 个子 .less 文件中使用的变量。它希望在使用它的每个 .less 文件中导入。

如何创建2个theme.less like

theme_blue.less @import "vars_blue.less"; @import "a.less"; @import "b.less"; @import "c.less";

和

theme_green.less @import "vars_green.less"; @import "a.less"; @import "b.less"; @import "c.less";

【问题讨论】：

你避免在每个文件中导入什么？是因为更改主题时需要在每个文件中修改它还是因为编译的文件太大（相同导入的 3 倍）？
我想通过更改在主题文件中导入的变量来设置主题，而不是在每个子 .less 文件中
不支持上述 3 个子 .less 文件中使用的变量 - 实际上是支持的。在导入文件中定义的变量在所有其他导入文件中可见，无论在哪里导入。所以你“我正在尝试”部分中的代码是完全正确的（你真的试过吗？）。
我试过了。构建失败，错误为变量未定义
我试过了。构建失败，错误为变量未定义 - 它不应该。确保你只编译你的主文件（所有东西都被导入的那个），而不是“目录中的所有文件”或某种（这是一个常见的错误）。

标签： less

【解决方案1】：

我不知道如何使用less，所以我的回答可能很糟糕。

在这种情况下，如何做到这一点：

你创建了一个 theme_vars.less 只包含：

@import "vars_green.less";

或者

@import "vars_blue.less";

然后在a.less、b.less 和c.less 开始：

@import "theme_vars.less";

这样当你需要更换主题时，只需要修改theme_vars.less

【讨论】：