Twitter Bootstrap non funziona con less.js

L'ho suddiviso in una forma più semplice ma non riesco ancora a scoprire perché questo non funziona. Tutti i file vengono risolti e le importazioni in Bootstrap sono ancora caricate, gli stili non vengono caricati.Twitter Bootstrap non funziona con less.js

bootstrap 1.4.0 meno 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>

Ho fatto un semplice style.less che funziona bene! Mi manca qualcosa di evidentemente ovvio?

Aggiornamento:

style.less come richiesto da Todd:

@primary_color: green; 

h1 { 
    color: @primary_color; 
}

fonte

2011-11-11 briangallagher

potete inviare i vostri style.less? – Todd

@Todd ha aggiornato il post. Lo style.less funziona bene però. – briangallagher

mostra il foglio di stile caricato/reso all'interno della console? –

Se si sta sviluppando questo a livello locale, assicurarsi che il browser utilizza il protocollo corretto. Dovrebbe essere visualizzato http: nella barra degli indirizzi, non nel file :.

Sulla mia macchina Windows 7 utilizzando Chrome (con una configurazione XAMPP), ho avuto lo stesso problema CSS utilizzando less.js con Bootstrap quando si accede al file HTML a:

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

Tuttavia, lo ha fatto visualizzato correttamente tramite HTTP:

http://localhost/index.html

Non certo perché, ma immagino che less.js si basa su intestazioni HTTP.

fonte

2011-11-15 02:49:39 joelhaus

È il problema con la struttura del file? /less/bootstrap/1.4.0/bootstrap.less punterà alla radice del tuo dominio indipendentemente dal tuo file html.

Se si ospitano con Apache e si ha la seguente struttura del progetto:

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

Quando si accede index.html da http://localhost, si cercherà il file less dalla radice dominio che è www/ . Pertanto, poiché nessuna cartella less si trova in questa directory root, verrà restituita come 404 (non trovata).

Quindi, la soluzione è utilizzare l'url relativo per i file meno. Se hai la struttura sopra, rimuovi il '/' e usa invece less/bootstrap/1.4.0/bootstrap.less.

fonte

2011-11-15 03:44:57 steveyang

sfortunatamente questo non è il problema. L'app è su un host virtuale e tutti i css/less sono relitti alla radice di domian. Tutti i file si stanno risolvendo correttamente, anche nella misura in cui i file di importazione sono stati caricati meno. – briangallagher

Aggiornamento 3/5/2012: I ragazzi Bootstrap hanno risolto questo problema nella versione 2.0.2 di Bootstrap (non ancora rilasciata). Vedi this commit.

Il bug di fondo è che la versione attuale di less.js non consente di utilizzare una variabile per per l'URL() valore direttamente (ad esempio url(@iconWhiteSpritePath)) - invece si deve utilizzare stringa di interpolazione (ad es url("@{iconWhiteSpritePath}")) , che realizza la stessa cosa I ragazzi di bootstrap hanno appena aggiornato la loro sintassi per tenere conto di questa stranezza.

risposta originale

mi sono imbattuto nel problema esatto oggi e capito la causa di essa.Dal momento che il tuo stack è qualche versione prima del mio (sto usando Bootstrap 2.0 e less.js 1.2.2) non posso essere sicuro che sia lo stesso problema, ma è probabilmente correlato.

In ogni caso, il problema per me era che Twitter Bootstrap sta definendo alcune variabili:

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

E poi utilizzarli direttamente nel valore url() per un background-image in 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 la discussione in this Github issue che sta causando un problema importante. Quando less.js si strozza su questo valore, l'intera compilazione fallisce.

La buona notizia è che c'è una soluzione a questo problema, fornita da csnover. Basta cambiare questa linea in 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) {

e si dovrebbe essere impostato. In altre parole, ci assicuriamo che val.value sia impostato in modo tale che charAt() non soffochi su un indefinito.

Speriamo che questa soluzione verrà presto impegnata nel progetto e Bootstrap funzionerà con less.js nell'ambiente del browser fuori dalla scatola.

fonte

2012-02-17 19:38:43 jsdalton

Questo ha funzionato per me, ma prendi nota che questo funziona solo per la versione completa di less.js (disponibile qui: https://github.com/cloudhead/less.js), non la versione scaricata dal loro sito web. – feldoh

per me ha funzionato

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

consentendo di sostituire

url(@iconSpritePath);

con

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

su less.js v1.2.1 e v2.0.1 Bootstrap

fonte

2012-02-23 00:40:26 maxx

Mi sono imbattuto nello stesso identico problema. La tua soluzione funziona per me. Grazie! – Abe

@ Attenzione, non funziona in questo modo: usa la nuova soluzione – maxx

Twitter Bootstrap non funziona con less.js

risposta

Problemi correlati