在Meteor app中导入Flat-Ui

Question

我正在尝试在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的指示，我能够编译。不过我还是有些麻烦。我无法使用复选框和开关。例如，我看到像这样的开关

而不是

另外，我无法看到字形。有什么建议吗？

Answer 1

如果您将flat-ui.less重命名为flat-ui.import.less，我认为这还不够。

如果您更喜欢使用Flat UI repo而不是包中的文件，我会按以下步骤操作：

1. 重命名客户端代码中<flat_ui_directory>内的每个文件，以包含.import关键字。
2. 重命名flat-ui.import.less中的所有导入，以包含.import关键字
3. 将flat-ui.import.less导入您自己的较少文件，例如style.less

希望有效。

Answer 2

似乎我已经弄清楚它是如何运作的：

1. 将less文件夹放在client文件夹中。

2. 将所有文件的文件扩展名从.less更改为.import.less，并将所有导入更改为@ user3435693。

3. 添加mizzao:bootstrap-3。

4. 将img和fonts文件夹放在public文件夹中。

5. 使用

   将jQuery脚本附加到模板

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

然后它有效！