Twitter Bootstrap nie działa z less.js

Rozbiłem to do najprostszej postaci, ale nadal nie mogę się dowiedzieć, dlaczego to nie działa. Wszystkie pliki zostaną rozwiązane, a import w Bootstrap zostanie załadowany, style nie zostaną załadowane.Twitter Bootstrap nie działa z less.js

bootstrap 1.4.0 mniej 1.1.3

<html> 
    <head> 
     <title>ahhhhhh...</title> 

     <link rel="stylesheet/less" href="/less/bootstrap/1.4.0/bootstrap.less"> 
     <script src="/less/less-1.1.3.min.js"></script> 

    </head> 
    <body> 

     <h1>WTF!!!</h1> 

    </body> 
</html>

Zrobiłem prosty style.less które działa prawidłowo! Czy brakuje mi czegoś jaskrawo oczywistego?

Aktualizacja:

style.less wymagane przez Todd:

@primary_color: green; 

h1 { 
    color: @primary_color; 
}

Źródło

2011-11-11 briangallagher

Możesz opublikować bezszyjkowy? – Todd

@Todd zaktualizował wpis. Styl.less działa jednak dobrze. – briangallagher

czy pokazuje załadowany/renderowany arkusz stylów w konsoli? –

Jeśli tworzysz to lokalnie, upewnij się, że przeglądarka używa właściwego protokołu. Powinien on wyświetlać: http: w pasku adresu, a nie plik:.

Na moim komputerze Windows 7 przy użyciu Chrome (z instalacji XAMPP), miałem ten sam problem CSS korzystając less.js z Bootstrap przy dostępie do pliku .html w:

file:///C:/xampp/htdocs/index.html

Jednak to zrobił renderuj poprawnie przez http:

http://localhost/index.html

Nie jestem pewien dlaczego, ale wyobrażam sobie, że less.js opiera się na nagłówkach HTTP.

Źródło

2011-11-15 02:49:39 joelhaus

Czy to jest problem z twoją strukturą plików? /less/bootstrap/1.4.0/bootstrap.less wskaże katalog główny Twojej domeny, niezależnie od pliku html.

Jeśli jesteś gospodarzem z apache i mieć następującą strukturę projektu:

www/ 
    your project/ 
     less/ 
     index.html 
    another project/ 
    others/

Po uzyskaniu dostępu index.html z http://localhost będzie patrzeć plik less z korzenia domeny która www/ . W związku z tym, że katalog nie znajduje się w tym katalogu głównym, zostanie zwrócony jako 404 (nie znaleziono).

Rozwiązaniem jest użycie względnego adresu URL do mniejszej liczby plików. Jeśli masz powyższą strukturę, usuń "/" i użyj zamiast tego less/bootstrap/1.4.0/bootstrap.less.

Źródło

2011-11-15 03:44:57 steveyang

Niestety to nie jest problem. Aplikacja znajduje się na wirtualnym hoście, a wszystkie css/less są zależne od katalogu głównego domeny domian. Wszystkie pliki są poprawne, nawet jeśli importowano mniej plików. – briangallagher

Aktualizacja 3/5/2012: Bootstrapowcy naprawili ten problem w wersji 2.0.2 Bootstrapa (jeszcze nie opublikowany). Zobacz this commit.

Zasadniczy błąd jest, że obecna wersja less.js nie pozwalają na użycie zmiennej do adresu URL() wartość bezpośrednio (np url(@iconWhiteSpritePath)) - zamiast tego trzeba użyć interpolacji ciąg (np url("@{iconWhiteSpritePath}")) , który dokonuje tego samego. Faceci bootstrap po prostu zaktualizowali swoją składnię, aby wziąć pod uwagę to dziwactwo.

Original Odpowiedź

wpadłem dokładnie problemu dzisiaj i zorientowali się przyczyną.Ponieważ twój stack jest kilka wersji przed moim (używam Bootstrap 2.0 i less.js 1.2.2) Nie mogę być pewien, że to ten sam problem, ale prawdopodobnie jest powiązany.

Tak czy inaczej, problem dla mnie było to, że Twitter Bootstrap definiuje pewne zmienne:

@iconSpritePath:   "../img/glyphicons-halflings.png"; 
@iconWhiteSpritePath:  "../img/glyphicons-halflings-white.png";

A potem wykorzystując je bezpośrednio w wartości url() na tle wizerunku w sprites.less:

[class^="icon-"], 
[class*=" icon-"] { 
    display: inline-block; 
    width: 14px; 
    height: 14px; 
    line-height: 14px; 
    vertical-align: text-top; 
    background-image: url(@iconSpritePath); 
    background-position: 14px 14px; 
    background-repeat: no-repeat; 

    .ie7-restore-right-whitespace(); 
} 
.icon-white { 
    background-image: url(@iconWhiteSpritePath);

}

Per dyskusji w this Github issue który jest przyczyną poważny problem. Gdy less.js dławi tę wartość, cała kompilacja kończy się niepowodzeniem.

Dobrą wiadomością jest poprawka w tym wydaniu, dostarczana przez csnover. Wystarczy zmienić tę linię w tree.URL:

if (typeof(window) !== 'undefined' && !/^(?:https?:\/\/|file:\/\/|data:|\/)/.test(val.value) && paths.length > 0) {

if (typeof(window) !== 'undefined' && typeof(val.value) !== 'undefined' && !/^(?:https?:\/\/|file:\/\/|data:|\/)/.test(val.value) && paths.length > 0) {

i powinien być ustawiony. Innymi słowy, po prostu zapewniamy, że wartość val jest ustawiona tak, że charAt() nie dławi się niezdefiniowanym.

Mam nadzieję, że ta poprawka zostanie wkrótce zatwierdzona do projektu, a Bootstrap będzie działał z less.js w środowisku przeglądarki po wyjęciu z pudełka.

Źródło

2012-02-17 19:38:43 jsdalton

To działało dla mnie, ale zauważ, że działa to tylko dla pełnej wersji less.js (dostępna tutaj: https://github.com/cloudhead/less.js), a nie wersji pobranej ze strony internetowej. – feldoh

dla mnie pracował

[class^="icon-"], 
[class*=" icon-"] { 
    display: inline-block; 
    width: 14px; 
    height: 14px; 
    line-height: 14px; 
    vertical-align: text-top; 
    background-image: url(../img/glyphicons-halflings.png); 
    background-position: 14px 14px; 
    background-repeat: no-repeat; 

    .ie7-restore-right-whitespace(); 
} 
.icon-white { 
    background-image: url(../img/glyphicons-halflings-white.png); 
}

więc zastąpić

url(@iconSpritePath);

url(../img/glyphicons-halflings.png);

na less.js v1.2.1 i v2.0.1 Bootstrap

Źródło

2012-02-23 00:40:26 maxx

Wpadłem na ten sam problem. Twoje rozwiązanie działa dla mnie. dzięki! – Abe

@ Bądź ostrożny, to nie działa w ten sposób - użyj nowego rozwiązania – maxx

Twitter Bootstrap nie działa z less.js

Odpowiedz

Powiązane problemy