我如何在我的meteor .less文件中使用twitter bootstrap混入，比如.border-radius(10px)？

Question

这是我的meteor应用程序中的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一起也在基目录中)上工作得很好。

如何在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

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

Answer 2

在Twitter bootstrap 3中没有border-radius混入。mixins.less只包含以下内容：

// 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 3

我通过使用为此目的构建的meterorite项目bootstrap3-less解决了同样的问题。