Jak używać twitterów bootstrap, takich jak .border-radius (10px) w moich plikach bezmeteorytowych?

Question

To jest mój plik main.less w mojej aplikacji meteorologicznej, do której dodałem już pakiet bootstrap.

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

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

Ale otwierając aplikację na http://localhost:3000/, otrzymuję ten błąd:

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. 

mając na uwadze .span4, .dropdown, a wszystkie inne klasy bootstrap działać dobrze z moim main.html źródła (która jest również w katalog podstawowy, wraz z main.less)

Jak korzystać z miksów bootstrap w main.less?

UPDATE: dziwo, jeśli mogę umieścić to w main.less

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

#searchbar { 
} 

wówczas zmian błędach do

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

Pakiet Meteor Bootstrap tylko zawiera skompilowany kod CSS i żaden z mniej plików . To sprawia, że ​​nie musisz polegać na pakiecie Less, aby użyć pakietu Bootstrap, ale niestety nie otrzymujesz wszystkich mniej miksów i nicet w swoich własnych plikach less. Jeśli chcesz ich użyć, usuń pakiet Bootstrap, użyj pakietu Mniej Meteoru i skopuj szablony Bootstrap Less, pliki JS i pliki img do folderu swojej aplikacji public lub client.

Answer 2

Nie ma border-radius wstawek w Twitter bootstrap 3. mixins.less zawiera tylko następujące:

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

postanowiłem ten sam problem przy użyciu projektu meterorite bootstrap3-less zbudowany do tego celu.