Können Sie CSS-Dateien in .less-Dateien importieren ...?
Ich bin mit weniger ziemlich vertraut und benutze es für meine gesamte Entwicklung. Ich benutze regelmäßig eine Struktur wie folgt:
@import "normalize";
//styles here
@import "mixins";
@import "media-queries";
@import "print";
Alle Importe sind andere .less-Dateien und funktionieren ordnungsgemäß.
Mein aktuelles Problem ist folgendes: Ich möchte eine CSS-Datei in .less importieren, die wie folgt auf Stile verweist, die in der CSS-Datei verwendet werden:
@import "../style.css";
.small {
font-size:60%;
.type;
}
// other styles here
Die CSS-Datei enthält eine Klasse namens, .type
aber wenn ich versuche, die .less-Datei zu kompilieren, wird der Fehler angezeigtNameError: .type is undefined
Importiert die .less-Datei keine .css-Dateien, nur andere .less-Dateien ...? Oder beziehe ich mich falsch ...?!
.less
Erweiterung erstellen . Verweisen Sie dann auf eine.less
Datei. Als symbolische Verknüpfung entlastet sie die Synchronisierung, da sich Ihre CSS-Änderungen sofort auf die importierte .less-Datei auswirken. Der Nachteil ist, dass Sie das endgültige CSS nach nachfolgenden Änderungen neu kompilieren sollten. Für Informationen zum Erstellen symbolischer Links in Windows geben SieMKLINK /?
ein Befehlsfenster ein.css
Datei mit der Inline-(less)
Direktive importieren und die Tatsache nutzen, dass die.css
Syntax eine gültige.less
Syntax istAntworten:
Sie können die Interpretation einer Datei als bestimmten Typ erzwingen, indem Sie eine Option angeben, z.
wird ausgegeben
und
importiert die
lib.css
Datei und behandelt sie als weniger. Wenn Sie angeben, dass eine Datei kleiner ist und keine Erweiterung enthält, wird keine hinzugefügt.quelle
(inline)
Direktive (siehe stackoverflow.com/a/22594082/160968 ) jetzt vorzuziehen ist(inline)
funktioniert nicht, da externe Verweise auf Schriftarten oder andere@import
CSS-Dateien nicht umgewandelt werden. Sie erhalten nur eine größere CSS-Datei, die viele 404 HTTP-Anforderungen verursacht ....Wenn Sie möchten, dass Ihr CSS ohne Verarbeitung in die Ausgabe kopiert wird, können Sie die
(inline)
Direktive verwenden . z.B,quelle
@import (css) "styles.css";
hat bei mir nicht funktioniert.(css)
die@import
Direktive unverändert, und als Ergebnis wird die CSS-Datei zur Laufzeit vom Browser geladen. Mit(inline)
wird der Inhalt der CSS-Datei tatsächlich in das kompilierte Stylesheet importiert. Dies ist das, was Sie möchten, wenn sich diese Datei beispielsweise außerhalb Ihres Webstamms befindet. Beachten Sie, dass das Standardverhalten beim@import
Erstellen einer.css
Datei das gleiche ist wie beim(css)
Flag - lesen Sie die Dokumente für weitere Informationen :)@import
Direktiven enthält, da dies eine "Verarbeitung" erfordern würde.Ich musste Folgendes mit Version 1.7.4 verwenden
Ich weiß, dass die akzeptierte Antwort ist,
@import (css) "foo.css"
aber es hat nicht funktioniert. Wenn Sie Ihre CSS-Klasse in Ihrer neuen weniger-Datei wiederverwenden möchten, müssen Sie verwenden(less)
und nicht(css)
.Überprüfen Sie die Dokumentation .
quelle
(less)
ist die einzige Option, wenn Sie einige Stile einer CSS-Datei wiederverwenden möchten), aber aus irgendeinem Grund hat @Fractalf den richtigen Teil mit seiner letzten Bearbeitung entfernt.@import (less, reference) "foo.css"
Ändern Sie die Dateierweiterung Ihrer CSS-Datei in.less
. Sie müssen kein WENIGER darin schreiben; Alle CSS sind WENIGER gültig (mit Ausnahme der MS-Inhalte, denen Sie entkommen müssen, aber das ist ein weiteres Problem.)Per Fractalfs Antwort ist dies in v1.4.0 behoben
quelle
Von der WENIGER Website :
Wie jitbit in den Kommentaren unten hervorhebt, ist dies wirklich nur für Entwicklungszwecke nützlich, da Sie nicht unnötig
@import
wertvolle Bandbreite verbrauchen möchten .quelle
@import
während der Entwicklung zu verwenden und dann die importierten Dateien zu einem einzigen Stylesheet zu kombinieren und zu minimieren, wenn ich zur Produktion übergehe.Versuche dies :
Aus der offiziellen Dokumentation:
Quelle: http://lesscss.org/
quelle
Wenn Sie nur eine CSS-Datei als Referenz importieren möchten (z. B. um die Klassen in Mixins zu verwenden), aber nicht die gesamte CSS-Datei in das Ergebnis einbeziehen möchten, können Sie Folgendes verwenden
@import (less,reference) "reference.css";
:my.less
reference.css
* Ergebnis (my.css) mit
lessc my.less out/my.css
*Ich benutze
lessc 2.5.3
quelle
&:extend(.reference-class all);
. Das direkte Verweisen auf die Klasse führte zu einem Kompilierungsfehler.Wenn Sie eine CSS-Datei importieren möchten, die als weniger bekannt sein sollte, verwenden Sie diese Zeile:
quelle
seit 1.5.0 können Sie das Schlüsselwort 'inline' verwenden.
Beispiel: @import (inline) "not-less-compatible.css";
Sie werden dies verwenden, wenn eine CSS-Datei möglicherweise nicht weniger kompatibel ist. Dies liegt daran, dass Less zwar die meisten bekannten Standard-CSS unterstützt, an einigen Stellen jedoch keine Kommentare unterstützt und nicht alle bekannten CSS-Hacks unterstützt, ohne das CSS zu ändern. Sie können dies also verwenden, um die Datei in die Ausgabe aufzunehmen, sodass sich alle CSS in einer Datei befinden.
(Quelle: http://lesscss.org/features/#import-directives-feature )
quelle