How do I use twitter bootstrap mixins such as .border-radius(10px) in my meteor .less files?

Question

This is my main.less file in my meteor app, to which I have already added the bootstrap package.

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

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

But opening the app on http://localhost:3000/, I get this error:

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.

Whereas the .span4, .dropdown, and all other bootstrap classes work just fine from my main.html source (which is also in the base directory, alongwith main.less)

How do I use the bootstrap mixins in main.less?

UPDATE: Amazingly, if I put this in main.less

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

#searchbar {
}

Then the error changes to

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

There is no border-radius mixin in Twitter bootstrap 3. mixins.less contains just the following:

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

The Meteor Bootstrap package just contains the compiled CSS code and none of the Less files. This makes it so you don't need to rely on the Less package to use the Bootstrap package but unfortunately, you don't get all the Less mixins and niceties in your own Less files. If you want to use those, then you should remove the Bootstrap package, use the Less Meteor package and copy the Bootstrap Less templates, JS files and img files into your app's public or client folder.