weniger Datei in eine andere weniger Datei importieren, aber Inhalt nicht enthalten

Question

Ich habe zwei weniger Dateien. eine namens main.less, die bootstrap.less importiert (was bootstrap-Variablen enthält, usw.) und dash.less, das nur Stile für mein Dashboard hat. Diese zwei Dateien sollten zwei CSS-Dateien generieren. main.css und dash.css.

Ich schließe die main.css in alle meine Seiten und die dash.css in nur das Dashboard ein.

Was ich versuche zu tun ist: Kompilieren Sie die Main.less mit Bootstrap-Variablen in Main.css enthalten. Kompilieren Sie dann das dash.less mit den Variablen bootstrap.less in derh.css. Dies führt jedoch dazu, dass der Inhalt von bootstrap.less wieder in die dash.css aufgenommen wird, was ich nicht möchte, weil ich die main.css bereits in meinem html einbeziehe.

Ist schon mal jemand darauf gestoßen?

Nachdem ich mehrere Methoden ausprobiert hatte, entschied ich mich für eine Grunt-Aufgabe, um die doppelten CSS-Blöcke zu entfernen.

Answer 1

Einen Weg gefunden. Ich hatte Import wie folgt zu verwenden:

@import (reference) "bootstrap.less"; 

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

Mit „Referenz“ wird die importierte Datei beziehen, aber es nicht ist.

Answer 2

Kompilieren aller weniger Dateien zu einer Datei wird gut sein. Aber wenn Sie Variablen von bootstrap.less in dash.less haben wollen. Dann gibt eine Lösung ist, wenn man in Bootstrap mit weniger Dump in bootstrap.less sehen, Komponente weise weniger Dateien wie enthalten -

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

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

etc.so, wenn Sie Variablen verwenden möchten, können Sie importieren ‚@import" variables.less "'in Ihrem' dash.less 'das ist es :)