CSS-Datei in .less-Datei importieren

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

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.

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';

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 .

Ä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

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 .

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/

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

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

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

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 )