如何在我的meteor .less文件中使用twitter bootstrap mixins,例如.border-radius(10px)？

Question

这是我的main.less流星应用程序中的文件,我已经添加了该bootstrap程序包.

@import "variables.less";
@import "mixins.less";

#searchbar {
  .border-radius(10px);
  .box-shadow();
}

但打开应用程序http://localhost:3000/,我收到此错误:

Your app is crashing. Here's the latest log.

Errors prevented startup:
/Users/anup/code/projects/learning/main.less: Less compiler error: .border-radius is undefined
/Users/anup/code/projects/learning/main.less: Less compiler error: .border-radius is undefined
Your application is crashing. Waiting for file change.

尽管.span4,.dropdown和所有其他的自举类工作得很好,从我的main.html源(这也是在基本目录,非常久远main.less)

我如何使用bootstrap mixins main.less？

更新:令人惊讶的是,如果我把它放进去 main.less

@import "variables.less";
@import "mixins.less";

#searchbar {
}

然后错误变为

Your app is crashing. Here's the latest log.

Errors prevented startup:
/Users/anup/code/projects/learning/main.less: Less compiler error: 'variables.less' wasn't found.

/Users/anup/code/projects/learning/main.less: Less compiler error: 'variables.less' wasn't found.

Your application is crashing. Waiting for file change.

Answer 1

border-radiusTwitter bootstrap 3 mixins.less中没有mixin.仅包含以下内容:

// Single side border-radius
.border-top-radius(@radius) {
  border-top-right-radius: @radius;
   border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
  border-bottom-right-radius: @radius;
     border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
  border-bottom-right-radius: @radius;
   border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
  border-bottom-left-radius: @radius;
     border-top-left-radius: @radius;
}

Answer 2

Meteor Bootstrap 包只包含编译后的 CSS 代码，不包含任何 Less 文件。这使得您不需要依赖 Less 包来使用 Bootstrap 包，但不幸的是，您无法在自己的 Less 文件中获得所有 Less mixins 和细节。如果您想使用这些，那么您应该删除 Bootstrap 包，使用 Less Meteor 包并将 Bootstrap Less 模板、JS 文件和 img 文件复制到您的应用程序public或client文件夹中。