CODEWITHSUNDEEP
twitter-bootstraplessmeteor
Anup Bishnoi
Anup Bishnoi

Reputation: 412

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

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.

Upvotes: 9

Views: 16889

Answers (3)

Ronald Pauffert
Ronald Pauffert

Reputation: 4376

I resolved the same issue by using the meterorite project bootstrap3-less built for this purpose.

Upvotes: 2

Petr Peller
Petr Peller

Reputation: 8826

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;
}

Upvotes: 6

Aaron
Aaron

Reputation: 2185

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.

Upvotes: 3

Related Questions