it-swarm.com.de

Importieren Sie eine CSS-Datei in eine .less-Datei

Können Sie CSS-Dateien in .less-Dateien importieren ...?

Ich kenne mich mit weniger ziemlich gut aus und verwende 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 alles funktioniert wie es sollte.

Mein aktuelles Problem ist folgendes: Ich möchte eine CSS-Datei in eine CSS-Datei importieren, ohne dass auf die in der CSS-Datei verwendeten Stile wie folgt verwiesen wird:

@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, erhalte ich den Fehler NameError: .type is undefined

Importiert die .less-Datei keine .css-Dateien, nur andere .less-Dateien ...? Oder beziehe ich mich falsch ...?!

213
Mr Jonny Wood

Sie können erzwingen, dass eine Datei als ein bestimmter Typ interpretiert wird, indem Sie eine Option angeben, z.

@import (css) "lib";

wird ausgegeben

@import "lib";

und

@import (less) "lib.css";

importiert das lib.css Datei und behandeln Sie es als weniger. Wenn Sie angeben, dass eine Datei kleiner ist und keine Erweiterung enthält, wird keine hinzugefügt.

304
Fractalf

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

@import (inline) '../timepicker/jquery.ui.timepicker.css';
237
mpen

Ändern Sie die Dateierweiterung Ihrer CSS-Datei in .less. Sie brauchen kein WENIGER hineinzuschreiben; Alles CSS ist WENIGER gültig (mit Ausnahme der MS-Inhalte, denen Sie entkommen müssen, aber das ist ein anderes Problem.)

Per Fractalfs Antwort dies ist in v1.4.0 behoben

28
Mathletics

Ich musste folgendes mit Version 1.7.4 verwenden

@import (less) "foo.css"

Ich weiß, dass die akzeptierte Antwort @import (css) "foo.css" ist, aber es hat nicht funktioniert. Wenn Sie Ihre CSS-Klasse in Ihrer neuen less-Datei wiederverwenden möchten, müssen Sie (less) Und nicht (css) Verwenden.

Überprüfen Sie die Dokumentation .

28
Gudradain

Von der WENIGER Website :

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

@import "lib.css"; Die Direktive bleibt einfach so wie sie ist und wird in der CSS-Ausgabe angezeigt.

Wie jitbit in den Kommentaren unten hervorhebt, ist dies wirklich nur für Entwicklungszwecke nützlich, da Sie keine unnötigen @imports verbraucht wertvolle Bandbreite.

8
Quantastical

Versuchen Sie dies:

@import "lib.css";

Aus der offiziellen Dokumentation:

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


Quelle: http://lesscss.org/

7
Dr.Kameleon

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 @import (less,reference) "reference.css"; verwenden:

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

6
hinneLinks

Wenn Sie eine CSS-Datei importieren möchten, die als weniger behandelt werden soll, verwenden Sie diese Zeile:

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

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 CSS-Standards unterstützt, an einigen Stellen jedoch keine Kommentare und nicht alle bekannten CSS-Hacks ohne Änderung des CSS unterstützt. Auf diese Weise können Sie die Datei in die Ausgabe aufnehmen, sodass sich alle CSS-Elemente in einer Datei befinden.

(Quelle: http://lesscss.org/features/#import-directives-feature )

3
Pieter-Jan