Normale CSS-Datei in SCSS-Datei importieren?

Question

Gibt es irgendwie zu importieren eine reguläre CSS-Datei mit Sass's @import Befehl? Während ich nicht alle der SCSS-Syntax von Sass verwenden, genieße ich immer noch es ist die Kombination/Komprimierung Funktionen, und möchte in der Lage sein, es ohne Umbenennung alle meine Dateien zu *.scss verwenden

Answer 1

Nachdem ich das gleiche Problem, ich habe mit allen Antworten hier und die Kommentare über das Repository von Sass in Github verwirrt.

Ich möchte nur darauf hinweisen, dass dieses Problem im Dezember 2014 behoben wurde. Es ist jetzt möglich, zu importieren css Dateien direkt in Ihre sass-Datei. Das Folgende PR in github löst das Problem.

Die Syntax ist die gleiche wie jetzt - @import "your/path/to/the/file" , ohne eine Erweiterung nach dem Dateinamen. Dadurch wird Ihre Datei direkt importiert. Wenn Sie anhängen *.css am Ende, wird es in die css Regel @import url(...) .

Falls Sie einige der "ausgefallenen" neuen Modul-Bundler wie z.B. webpack verwenden, müssen Sie wahrscheinlich ~ am Anfang des Weges. Wenn Sie also den folgenden Pfad importieren möchten node_modules/bootstrap/src/core.scss würden Sie etwas schreiben wie
@import "~bootstrap/src/core" .

NOTE :
Es scheint, dass dies nicht bei allen funktioniert. Wenn Ihr Interpreter auf libsass es sollte gut funktionieren (Checkout este ). Ich habe getestet mit @import auf node-sass und es funktioniert gut. Leider funktioniert dies und funktioniert nicht auf einige Ruby-Instanzen.

Answer 2

Dies wurde implementiert und zusammengeführt ab Version 3.2 ( ziehen #754 fusioniert am 2. Januar 2015 para libsass wurden die Themen ursprünglich hier definiert: sass #193 #556 , libsass #318 ).

Um es kurz zu machen, die Syntax ist die nächste:

1. zum Importieren (Einbinden) der rohen CSS-Datei

   die Syntax ist **ohne `.css`**-Erweiterung am Ende (führt dazu, dass ein Teil von `s[ac]ss|css` tatsächlich gelesen und inline in SCSS/SASS eingebunden wird):

   @import "path/to/file";

2. um die CSS-Datei auf herkömmliche Weise zu importieren

   Die Syntax ist traditionell, **mit der Erweiterung `.css` am Ende** (ergibt `@import url("path/to/file.css");` in Ihrem kompilierten CSS):

   @import "path/to/file.css";

Und sie ist verdammt gut: Diese Syntax ist elegant und lakonisch und zudem rückwärtskompatibel! Sie funktioniert hervorragend mit libsass y node-sass .

__

Um weitere Spekulationen in den Kommentaren zu vermeiden, schreibe ich dies ausdrücklich: Rubinrot basiert Sass hat immer noch diese Funktion nicht implementiert nach 7 Jahren der Diskussion. Zum Zeitpunkt des Schreibens dieser Antwort wurde versprochen, dass es in 4.0 eine einfache Möglichkeit geben wird, dies zu erreichen, wahrscheinlich mit Hilfe von @use . Es scheint, dass es sehr bald eine Umsetzung geben wird, die neue "geplant" Der Tag "Vorschlag angenommen" wurde für die Ausgabe #556 und die neue @use Funktion.

UPD: am 26. Oktober 2020 lib-sass wurde veraltet daher Ausgabe #556 wurde sofort geschlossen .

__

die Antwort kann aktualisiert werden, sobald sich etwas ändert .

Answer 3

Zum Zeitpunkt der Erstellung dieses Dokuments scheint dies noch nicht implementiert zu sein:

https://github.com/sass/sass/issues/193

Bei libsass (C/C++-Implementierung) funktioniert der Import für *.css auf die gleiche Weise wie bei *.scss Dateien - lassen Sie einfach die Erweiterung weg:

@import "path/to/file";

Damit wird Folgendes importiert path/to/file.css .

Ver diese Antwort für weitere Einzelheiten.

Ver diese Antwort für die Ruby-Implementierung (sass gem)

Answer 4

Sie müssen der einzuschließenden css-Datei einen Unterstrich voranstellen und ihre Erweiterung in scss ändern (Bsp: _yourfile.scss ). Dann müssen Sie es einfach so nennen:

@import "yourfile";

Und es wird den Inhalt der Datei einschließen, anstatt die CSS-Standardanweisung @import zu verwenden.

Answer 5

Gute Neuigkeiten: Chris Eppstein hat ein Kompass-Plugin mit Inline-CSS-Importfunktionalität entwickelt:

https://github.com/chriseppstein/sass-css-importer

Jetzt ist das Importieren einer CSS-Datei so einfach wie:

@import "CSS:library/some_css_file"