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）中工作得很好/ p>

如何在main.less中使用bootstrap mixins？

更新：令人惊讶的是，如果我把它放在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

Twitter bootstrap 3中没有border-radius mixin。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 2

Meteor Bootstrap包只包含已编译的CSS代码，而不包含Less文件。这使得您不需要依赖Less包来使用Bootstrap包，但遗憾的是，您没有在自己的Less文件中获得所有Less mixins和niceties。如果你想使用它们，那么你应该删除Bootstrap包，使用Less Meteor包并将Bootstrap Less模板，JS文件和img文件复制到你应用的public或client文件夹中。

Answer 3

我使用为此目的而构建的陨石项目bootstrap3-less解决了同样的问题。

如何在我的meteor .less文件中使用twitter bootstrap mixins，例如.border-radius（10px）？

3 个答案: