Kann ich reguläre CSS-Dateien mit „@import' in SCSS importieren?

Reguläre CSS-Dateien in SCSS mit @import importieren

Viele Entwickler wünschen sich die kombinierten und komprimierten Funktionen von SCSS, ohne dass eine Umbenennung erforderlich ist alle ihre Dateien in *.scss. Um dieses Problem anzugehen, stellt sich die Frage: Ist es möglich, reguläre CSS-Dateien mit dem Befehl @import in SCSS zu importieren?

Antwort

Anfangs war dieser Ansatz mit Herausforderungen verbunden. was zu Verwirrung in der Gemeinschaft führt. Seit Dezember 2014 wurde das Problem jedoch durch einen GitHub-Pull-Request behoben.

Die aktualisierte Syntax zum direkten Importieren von CSS-Dateien in SCSS lautet @import „your/path/to/the/file“, ohne eine Dateierweiterung, die dem Dateinamen folgt. Dadurch wird die Datei direkt importiert.

Wenn die Erweiterung *.css angehängt wird, wird sie in die CSS-Regel @import url(...) übersetzt.

Für Modul-Bundler wie Webpack ist dies der Fall Es wird empfohlen, ~ am Anfang des Pfads zu verwenden. Um die Datei node_modules/bootstrap/src/core.scss zu importieren, verwenden Sie einfach @import „~bootstrap/src/core“.

Wichtiger Hinweis

Es ist erwähnenswert dass diese Lösung möglicherweise nicht für jeden funktioniert. Wenn Ihr Interpreter auf libsass basiert, sollte er wie erwartet funktionieren. Andererseits wurde festgestellt, dass es mit Node-Sass funktioniert, auf bestimmten Ruby-Instanzen jedoch möglicherweise nicht funktioniert.

Das obige ist der detaillierte Inhalt vonKann ich reguläre CSS-Dateien mit „@import' in SCSS importieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!