importa meno file in un altro meno file ma non include il contenuto

Question

Ho due file in meno. uno denominato main.less che importa bootstrap.less (che include le variabili di bootstrap .. ecc.) e dash.less che ha solo gli stili per la mia dashboard. Questi due file dovrebbero generare due file CSS. main.css e dash.css.

Sto includendo il main.css in tutte le mie pagine e il dash.css in solo nella dashboard.

Quello che sto cercando di fare è: compilare main.less con le variabili di bootstrap incluse in main.css. Quindi compila il dash.less usando le variabili bootstrap.less in to dash.css. Comunque questo risulterà il contenuto di bootstrap.less da includere nuovamente nel dash.css che non voglio perché sto già includendo il file main.css nel mio html.

Qualcuno si è mai imbattuto in questo?

Dopo aver provato diversi metodi, la mia decisione era di utilizzare un task grunt per rimuovere i blocchi css duplicati.

Answer 1

Trovato un modo. Ho dovuto importare in questo modo:

@import (reference) "bootstrap.less"; 

.myclass{color:@bootstrap-variable;} 
.anotherclass{.classDefinedInBootstrapLessWhichUsesAVariableDefinedInVariablesLess} 

L'utilizzo di "riferimento" genera il file importato ma non lo include.

Answer 2

La compilazione di tutti i file in un file sarà buona. Ma se si desidera avere variabili di bootstrap.less in dash.less. Poi c'è una soluzione, se si vede in bootstrap con meno discarica in bootstrap.less, componenti saggio meno file sono inclusi come -

// Core variables and mixins 
@import "variables.less"; 
@import "mixins.less"; 

// Reset 
@import "normalize.less"; 
@import "print.less"; 

etc.so se si desidera utilizzare le variabili è possibile importare '@import " variables.less "'nel tuo' dash.less 'questo è :)