CSS-Datei in .less-Datei importieren

228

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, .typeaber 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 ...?!

Herr Jonny Wood
quelle
5
WENIGER greift auf CSS zurück, daher sollten Sie in der Lage sein, style.css einfach in style.less umzubenennen und dann wie gewohnt zu importieren ... es sei denn natürlich, das Umbenennen von style.css ist keine Option
Jackwanders
3
Ja, leider ist das Umbenennen der CSS-Datei nicht wirklich möglich.
Herr Jonny Wood
1
Habe das gleiche Problem. Bitte unterstützen Sie das Problem github.com/cloudhead/less.js/issues/303
Yaroslav
5
Wenn Sie die CSS-Datei nicht extern referenzieren müssen und gleichzeitig die CSS-Datei nicht ändern (umbenennen) müssen, können Sie einen symbolischen Link mit der .lessErweiterung erstellen . Verweisen Sie dann auf eine .lessDatei. 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 Sie MKLINK /?ein Befehlsfenster ein
Ivaylo Slavov
@jackwanders, eine Umbenennung ist nicht erforderlich, da WENIGER auf CSS zurückgreift (wie Sie richtig hervorheben). Sie können die .cssDatei mit der Inline- (less)Direktive importieren und die Tatsache nutzen, dass die .cssSyntax eine gültige .lessSyntax ist
ira

Antworten:

316

Sie können die Interpretation einer Datei als bestimmten Typ erzwingen, indem Sie eine Option angeben, z.

@import (css) "lib";

wird ausgegeben

@import "lib";

und

@import (less) "lib.css";

importiert die lib.cssDatei und behandelt sie als weniger. Wenn Sie angeben, dass eine Datei kleiner ist und keine Erweiterung enthält, wird keine hinzugefügt.

Fractalf
quelle
1
Dies ist die richtige Antwort. Der dritte importiert + kompiliert den CSS-Code als weniger Code und lässt die Direktive nicht intakt.
CMCDragonkai
1
Ich denke, @import (include) "lib.css" sollte verwendet werden. Ich mag die Semantik, den Compiler anzulügen, nicht. Sicher, wenn Sie wissen, dass die Datei keinen WENIGER Code enthält.
16
Dadurch wird eine zusätzliche http-Anfrage für foo.css erstellt, sodass die (inline)Direktive (siehe stackoverflow.com/a/22594082/160968 ) jetzt vorzuziehen ist
Urs
1
(inline)funktioniert nicht, da externe Verweise auf Schriftarten oder andere @importCSS-Dateien nicht umgewandelt werden. Sie erhalten nur eine größere CSS-Datei, die viele 404 HTTP-Anforderungen verursacht ....
user3338098
Zurücksetzen der letzten Bearbeitung, da sie einfach falsch war und das Q nicht beantwortete.
Sieben-Phasen-Max.
246

Wenn Sie möchten, dass Ihr CSS ohne Verarbeitung in die Ausgabe kopiert wird, können Sie die (inline)Direktive verwenden . z.B,

@import (inline) '../timepicker/jquery.ui.timepicker.css';
mpen
quelle
7
Perfekt. Dies funktioniert gut, wenn Sie einige CSS-Dateien (z. B. in einem ie7.less) zusammenfassen möchten, diese aber nicht unbedingt verarbeiten möchten (z. B. verwendet bootstrap-ie7 Ausdrücke, die WENIGER nicht gut verarbeiten).
Joe
4
Sehr hilfreich. @import (css) "styles.css";hat bei mir nicht funktioniert.
ivkremer
10
Beide befassen sich mit unterschiedlichen Anwendungsfällen. Mit bleibt (css)die @importDirektive 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 @importErstellen einer .cssDatei das gleiche ist wie beim (css)Flag - lesen Sie die Dokumente für weitere Informationen :)
neemzy
Dies funktioniert also offensichtlich nicht, wenn Ihre CSS-Datei @importDirektiven enthält, da dies eine "Verarbeitung" erfordern würde.
user3338098
Bedeutet "Inline", dass alle Importe auch inline sind? Gibt es eine Möglichkeit, rekursiv inline zu sein?
Straßenlaterne
29

Ich musste Folgendes mit Version 1.7.4 verwenden

@import (less) "foo.css"

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 .

Gudradain
quelle
2
Die akzeptierte Antwort hatte anfangs die richtige Option (ja, (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.
Sieben-Phasen-Max
1
Sie können "Referenz" und "weniger" kombinieren:@import (less, reference) "foo.css"
Skarllot
28

Ä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

Mathematik
quelle
4
Technisch gesehen importiert das keine CSS-Datei.
Nilskp
@nilskp du bist richtig; Wenn Sie die Klassen jedoch in einer anderen Datei verwenden möchten, benötigen Sie eine WENIGER-Datei, keine CSS-Datei.
Mathletics
1
@nilskp Wollen Sie damit sagen, dass das Ändern der Erweiterung zu viel verlangt, um die Datei als WENIGER analysieren zu lassen?
Mathletics
23
Ja, natürlich ist es das. Versuchen Sie, außerhalb eines kleinen Heimprojekts zu denken, in dem Sie alle Dateien besitzen. Denken Sie an größere Projekte mit mehreren Personen, bei denen nicht jeder WENIGER nutzt. Es gibt unzählige Anwendungsfälle, in denen das Ändern von Dateinamen nicht möglich ist.
Nilskp
1
Sie sollten sich darum kümmern, ob Ihr CSS Folgendes enthält: calc (100% - 45px); und das willst du im browser. Wenn weniger die Datei als weniger verarbeitet, lautet die endgültige Ausgabe: calc (55%); weil weniger die calc.
Christof Aenderl
8

Von der WENIGER Website :

Wenn Sie eine CSS-Datei importieren möchten und WENIGER sie nicht verarbeiten möchten, verwenden Sie einfach die Erweiterung .css:

@import "lib.css"; Die Direktive bleibt unverändert und landet in der CSS-Ausgabe.

Wie jitbit in den Kommentaren unten hervorhebt, ist dies wirklich nur für Entwicklungszwecke nützlich, da Sie nicht unnötig @importwertvolle Bandbreite verbrauchen möchten .

Webdevkit
quelle
14
Dadurch wird die Datei nicht IMPORTIERT, sondern die @ import-Direktive bleibt erhalten. Es wird immer noch funktionieren, aber Sie sollten CSS-Import vermeiden - sehen Sie sich diese Developers
Alex
5
Danke für die Info @jitbit. Persönlich finde ich es einfacher, sie @importwährend der Entwicklung zu verwenden und dann die importierten Dateien zu einem einzigen Stylesheet zu kombinieren und zu minimieren, wenn ich zur Produktion übergehe.
Webdevkit
1
Wenn Sie die Frage sorgfältig lesen (und nicht nur die Kopfzeile), werden Sie feststellen, dass das OP eine Klasse in der CSS-Datei als Mixin referenzieren möchte. Dies ist nicht möglich, wenn sie nur als einfacher CSS-Import analysiert wird.
Ehrfurcht
7

Versuche dies :

@import "lib.css";

Aus der offiziellen Dokumentation:

Sie können sowohl CSS- als auch weniger Dateien importieren. Es werden nur weniger Dateiimportanweisungen verarbeitet, CSS-Dateiimportanweisungen bleiben unverändert. Wenn Sie eine CSS-Datei importieren möchten und WENIGER sie nicht verarbeiten möchten, verwenden Sie einfach die Erweiterung .css:


Quelle: http://lesscss.org/

Dr.Kameleon
quelle
2
Wenn Sie die Frage sorgfältig lesen (und nicht nur die Kopfzeile), werden Sie feststellen, dass das OP eine Klasse in der CSS-Datei als Mixin referenzieren möchte. Dies ist nicht möglich, wenn sie nur als einfacher CSS-Import analysiert wird.
Ehrfurcht
6

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

 @import (less,reference) "reference.css";
 .my-class{
     background-color:black;
     .reference-class;
     color:blue;
 }

reference.css

.reference-class{
    border: 1px solid red;
}

* Ergebnis (my.css) mit lessc my.less out/my.css*

.my-class {
  background-color: black;
  border: 1px solid red;
  color: blue;
}

Ich benutze lessc 2.5.3

hinneLinks
quelle
Das brauchte ich. Ich musste jedoch die Extend-Syntax verwenden : &:extend(.reference-class all);. Das direkte Verweisen auf die Klasse führte zu einem Kompilierungsfehler.
Jens Neubauer
4

Wenn Sie eine CSS-Datei importieren möchten, die als weniger bekannt sein sollte, verwenden Sie diese Zeile:

.ie {
  @import (less) 'ie.css';
}
Charles
quelle
3

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 )

Pieter-Jan
quelle