Wie kann ich CSS-Dateien in meine .less-Dateien importieren?

.css-Dateien in .less-Dateien importieren

Obwohl es gängige Praxis ist, andere .less-Dateien in Ihre .less-Projekte zu importieren, ist dies auch der Fall Es ist möglich, .css-Dateien zu importieren. Dieser Vorgang erfordert jedoch einen zusätzlichen Schritt.

Um eine CSS-Datei in Ihre .less-Datei aufzunehmen, müssen Sie den Typ der Datei, die Sie importieren, mithilfe der @import-Direktive angeben. Wenn Sie beispielsweise style.css importieren möchten, schreiben Sie:

<code class="less">@import (css) "../style.css";</code>

Durch die Angabe von (css) vor dem Dateipfad zwingen Sie den Importer, style.css als CSS-Datei zu behandeln. Dadurch wird sichergestellt, dass alle in style.css definierten Klassen oder Stile in Ihrer .less-Datei verfügbar sind.

Angenommen, style.css enthält eine Klasse namens .type. Wenn Sie versuchen, diese Klasse in Ihrer .less-Datei zu verwenden, ohne die (css)-Direktive anzugeben, wird ein Fehler auftreten, da .type nicht im .less-Kontext definiert ist. Wenn Sie jedoch den folgenden Code verwenden:

<code class="less">@import (css) "../style.css";

.small {
    font-size:60%;
    .type;
}</code>

Sie können in style.css definierte Stile referenzieren und nahtlos auf Klassen wie .type zugreifen.

Das obige ist der detaillierte Inhalt vonWie kann ich CSS-Dateien in meine .less-Dateien importieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!