按需导入 LESS 文件

Question

简短：是否有可能“按需”导入更少的文件，仅当尚未定义函数/变量时？

LONG：假设我有 LESS 文件，其中包含我的页面样式。我们称之为styles.less。此外，我还有 5 个 LESS 文件。那里的每个人都包含通用设计原语，例如我在许多项目中使用的信息框的设计——这就是它没有被合并到styles.less 的原因。假设它被称为.infobox {}。
那么，当.infobox 在styles.less 中找不到时，是否可以“尝试”导入这5 个文件？我对通过 lessc（node 的模块）进行编译和在 Web 浏览器中进行“on-the-fly”编译感兴趣。

我希望我的示例足以说明情况 - 如果没有，请随时发表评论，我会编辑问题以提供更多信息。

Answer 1

我还没有找到一种完全自动化的方法。我也不知道您是否需要此功能以减少 @import 请求或只是减少最终 CSS 以不加载它不需要的项目。

如果您不需要它完全自动化，并且您只是想减少生成的 CSS，并且您没有太多想要执行此操作的类，那么您可以在您的styles.less 文件。

//have at the top of the file some variables set to 0 or 1 if the class
//is present or absent in that file
@usesClass-infobox: 0;

//set up a mixin to load it if NOT in the file
.setClass-infobox(@set) when (@set = 0) {
  @import 'infobox.less'; 
}

//a default mixin to do nothing otherwise
.setClass-infobox(@set) {}

//call the mixin
.setClass-infobox(@usesClass-infobox);

当然，这并不能真正帮助自动化流程。毕竟，如果您知道.infobox 不在styles.less 文件中，那么您只需添加@import 即可，无需检查任何额外的mixin。这给出的唯一真正价值是它设置了一个变量部分，基本上通知编码器“嘿，如果你不在这里包含它，可以为这个功能加载一些模块；所以告诉我，你是否包含它？”

同样，我不确定这是否能完全解决您的目标。我提供它是因为它在某些情况下可能对某些人有用。