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

Question

我正在尝试在 Meteor 中包含 bootstrap 的 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.import.less 重命名 flat-ui.less 但没有成功。

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

而不是这个

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

Answer 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

希望有用。

Answer 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');
};

那就成功了！

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

Import Flat-Ui in Meteor app

twitter-bootstrap

meteor

less

flatui