如何在流星包中重用引导程序的 LESS 变量

Question

我正在制作一个包，为引导程序提供一些额外的 ui 组件。我选择依赖（很棒的）nemo64:bootstrap 包来构建 LESS 引导库。

我的包必须提供额外的 LESS 文件，这些文件需要一些引导 LESS 变量（比如@brand-success）。最终用户很可能已经自定义了这些变量。

nemo64:bootstrap 包提供了一个包含引导变量的文件 (custom.bootstrap.import.less)，供用户在需要的地方包含它。它也是期望用户自定义其引导程序的地方。所以我想把它包含在我的包的 less 文件中，但我不知道，从我的包中，最终用户将把这个文件放在哪里。

我可以假设给定的默认路径在 nemo64:bootstrap 包文档 (/client/lib/custom.bootstrap.import.less) 中有一个示例，但如果另一个包编写者做出不同的选择，这些包将不兼容。

有没有办法不对最终用户强制执行特定的文件架构？

Answer 1

我不完全确定如何进行。但是您可以先注册一个与变量文件具有相同扩展名的句柄。这就是我的意思：

var handler = function (compileStep, isLiterate) {
  // This will get the file path from the handler
  var variablesFilePath = compileStep._fullInputPath;
  console.log(variablesFilePath); // print the path to the server when starting
}
// handler may also be a callback
Plugin.registerSourceHandler('bootstrap.import.less', {archMatching: 'web'}, handler);

这将创建一个处理程序，您可以从中使用插件 API。更多信息可以参考Meteor API docs。

让我知道这是如何工作的。

Answer 2

一种解决方案是将 LESS 文件导出为服务器上的资产，并使用构建插件将文件复制到应用程序中，以便用户可以在任何需要的地方@import。

这与nemo64:bootstrap 的操作方式相同，即a bit hacky，并且需要将包拆分为两个不同的包。我在gist中解释了所有内容

Answer 3

据我了解，用于编译 Bootstrap 的 CSS 的软件包（例如 nemo64::bootstrap）仅有意义，因为 metror 的默认 Less 编译器会将每个 less 文件编译到单个 css 文件中。除非您的 Less 文件的名称以下划线 (_) 开头，否则它将被编译。

在编译 Bootstrap 时，您应该只编译 bootstrap.less 文件，所有其他文件只是部分文件。部分应该只被导入而不是在 CSS 文件中编译。 Bootstrap 的部分文件名不以下划线开头，因此使用 nemo64::bootstrap 等包来编译 Bootstrap 并允许您稍后更新 Bootstrap。

对于您的软件包，您可以自己包含 Bootstrap Less 代码。您还应该内置 Less 编译器，并确保它只编译您的主文件。可以在以下位置找到示例：https://atmospherejs.com/bassjobsen/less-pleeease

在上述步骤之后，您的主要 less 文件可以包含：

@import "bootstrap";
@import "overrides";

等等