Come si usano mixin di bootstrap di twitter come .border-radius (10px) nei miei file .less meteor?

Question

Questo è il mio file main.less nella mia app meteo, a cui ho già aggiunto il pacchetto bootstrap.

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

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

Ma aprendo l'app sul http://localhost:3000/, ottengo questo errore:

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. 

considerando che la .span4, .dropdown, e tutte le altre classi bootstrap lavoro appena benissimo dal mio main.html sorgente (che è anche nel directory di base, insieme a main.less)

Come utilizzare i mixin di bootstrap in main.less?

UPDATE: Sorprendentemente, se ho messo questo in main.less

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

#searchbar { 
} 

Poi i cambiamenti di errore per

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

Il pacchetto Meteor Bootstrap solo contiene il codice CSS compilato e nessuno dei file Meno . Questo rende così non è necessario fare affidamento sul pacchetto Less per utilizzare il pacchetto Bootstrap, ma sfortunatamente, non si ottengono tutti i meno mixin e sottigliezze nei propri file Less. Se si desidera utilizzarli, è necessario rimuovere il pacchetto Bootstrap, utilizzare il pacchetto Less Meteor e copiare i modelli Bootstrap Less, i file JS e i file img nella cartella public o client.

Answer 2

Non c'è border-radius mixin twitter bootstrap 3. mixins.less contiene solo la seguente:

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

ho risolto lo stesso problema utilizzando il progetto meterorite bootstrap3-less costruito per questo scopo.