2012-03-23 13 views
8

Ho un file vile semplice style.less nel mio progetto e sto usando bootstrap per un design pulito e reattivo. Quindi qui si va:meno compilatore raddoppia tutto

@import "bootstrap/bootstrap.less"; 

@import "../css/jquery.vegas.css"; 
@import "../css/jquery.fancybox-1.3.4.css"; 

body { 
    padding-top: 60px; 
    padding-bottom: 40px; 
} 

@import "bootstrap/responsive.less"; 

Ora, quando compilo il file con meno, il CSS-output è strano:

.container { 
    width: 940px; 
    margin-left: auto; 
    margin-right: auto; 
    *zoom: 1; 
    *zoom: 1; 
    width: 940px; 
    margin-left: auto; 
    margin-right: auto; 
    *zoom: 1; 
    *zoom: 1; 
} 

Sta solo raddoppiando tutto! Posso vedere questo strano comportamento anche nel browser direttamente quando sto lavorando sulla mia istanza di devolper.

Questo è così strano e terribile, qualcuno ha un'idea del perché questo sta accadendo? Nei file meno originali che vengono importati da bootstrap, tutto è definito solo una volta.

+0

Cosa c'è in "responsive.less"? Alcuni compilatori eliminano le regole duplicate e alcuni non ... – prodigitalson

+0

Quale versione di LESS stai usando; quale compilatore e versione? Questa è un'informazione essenziale per iniziare a pensare a quale potrebbe essere il tuo problema ... – sg3s

+0

Scusa, la versione di meno è 1.2.0 e l'avvio con l'host di script di Windows -> http://blog.dotsmart.net/2010/11/ 26/running-the-less-js-command-line-compiler-on-windows/ Il contenuto di "responsive.less" ha alcune altre importazioni (variables.less, mixins.less) e molte media-query con tipico less-code in esso, quindi .. niente di speciale, e, per quanto posso vedere, non ci sono duplicati – jebbie

risposta

6

Ecco due potenziali soluzioni. Entrambi sembrano ovvie, ma ho trascurato ENTRAMBI di loro a volte ...

  1. Stai vedendo le regole di stile duplicate nel file css compilato reale? O vedi regole duplicate in Firebug o negli strumenti di sviluppo di Chrome? Se è il secondo, torna indietro e assicurati che il tuo file css abbia effettivamente dei duplicati.

  2. Ho avuto lo stesso identico problema di duplicazione durante l'utilizzo di LESS, e non sono riuscito a capirlo fino a quando non ho capito che avrei incluso il css due volte nello <head>. È un errore stupido, ma l'ho fatto sicuramente prima.

Buona fortuna.

+4

Risolto! GRANDE grazie a Emerson :) La seconda soluzione era il problema esatto nel mio caso: l'importazione: @import "bootstrap/responsive.meno "; include nuovamente i file" variables.less "e" mixins.less "- sono già inclusi nella prima importazione di" bootstrap.less "-.- Quindi, ho appena eliminato queste importazioni in responsive.less e ora tutto sembra a posto :) – jebbie

+0

Sono felice di averlo aiutato. Quando ne hai la possibilità, segna la domanda come risolta. – emersonthis

0

Assicurarsi di utilizzare l'ultima versione di LESS.

Il comportamento predefinito di @import non ha usato per essere molto intelligente se è stato chiamato più volte da file diversi ..

Quindi la direttiva @import-once è stato introdotto per assicurarsi un particolare meno file è stato incluso solo una volta, non importa quanti file è stato utilizzato.

Tuttavia, ora il comportamento @import-once è impostato come predefinito anche se si utilizza solo @import.

Vedere anche: what is the LESS CSS statement @import-once good for?

Problemi correlati