在 Meteor 应用程序中导入 Flat-Ui答案

【问题标题】：Import Flat-Ui in Meteor app在 Meteor 应用程序中导入 Flat-Ui
【发布时间】：2015-06-06 09:13:59
【问题描述】：

我正在尝试在 Meteor 中包含用于引导程序的 flat-ui 主题。我添加了 mrt:bootstrap-3 和更少的软件包。然后，我从我的项目目录中的 lib/Flay-UI-2.2.2/ 中的 flat-ui 项目中复制了文件夹 fonts、img、js 和 less。但是我有以下编译错误：

While building the application:
lib/Flat-UI-2.2.2/less/modules/button-groups.less:12:35: Less compiler
error: variable @brand-primary is undefined
lib/Flat-UI-2.2.2/less/modules/buttons.less:10:14: Less compiler error:
variable @btn-font-size-base is undefined
...

好像编译的顺序不对，怎么解决这个问题？我还尝试将flat-ui.less 重命名为flat-ui.import.less，但没有成功。

更新 1 按照@user3435693 的指示，我能够编译。但是我仍然有一些麻烦。我无法使用复选框和开关。例如，我看到这样的开关

而不是这个

另外我看不到字形图标。有什么建议吗？

【问题讨论】：

标签： twitter-bootstrap meteor less flatui

【解决方案1】：

我认为将flat-ui.less 重命名为flat-ui.import.less 是不够的。

如果您更喜欢使用 Flat UI repo 中的文件而不是包，我将按如下方式进行：

重命名客户端代码中 <flat_ui_directory> 中的每个文件，以包含 .import 关键字。
重命名在 flat-ui.import.less 中进行的每个导入以包含 .import 关键字
将flat-ui.import.less 导入到您自己的less 文件中，例如style.less

希望有效。

【讨论】：

如果我将所有文件从 lib/Flat-UI-2.2.2/ 移动到 client/Flat-UI-2.2.2/，这将有效。但是我仍然有问题。请查看更新。

【解决方案2】：

看来我已经弄清楚了它是如何工作的：

将less文件夹放入client文件夹内。
将所有文件的文件扩展名从.less更改为.import.less，以及@user3435693所说的所有导入。
添加mizzao:bootstrap-3。
将img 和fonts 文件夹放入public 文件夹中。

将 jQuery 脚本附加到模板中

Template.myTemp.rendered = function() {
  $.getScript('your/path/to/lib/application.js');
  $.getScript('your/path/to/lib/flat-ui.min.js');
};

然后就可以了！

【讨论】：