Gibt es überhaupt eine Möglichkeit, eine reguläre CSS-Datei mit dem @import
Befehl von Sass zu importieren ? Obwohl ich nicht die gesamte SCSS-Syntax von sass verwende, genieße ich es dennoch, Funktionen zu kombinieren / zu komprimieren, und möchte sie verwenden können, ohne alle meine Dateien in * .scss umzubenennen
509
@import
in einer regulären CSS-Datei nur noch ein reguläres CSS @import generieren . Das bedeutet eine weitere HTTP-Anforderung und kein Kombinieren oder Komprimieren. Wenn sich einige Implementierungen anders verhalten, würde ich sagen, dass es sich um eine nicht standardmäßige Funktion handelt, die von der Sprachspezifikation abweicht.Antworten:
Sieht so aus, als wäre dies zum Zeitpunkt des Schreibens nicht implementiert:https://github.com/sass/sass/issues/193Bei libsass (C / C ++ - Implementierung) funktioniert
*.css
der Import genauso wie bei*.scss
Dateien - lassen Sie einfach die Erweiterung weg :Dies wird importiert
path/to/file.css
.Siehe diese Antwort für weitere Details.
Siehe diese Antwort für die Ruby-Implementierung (sass gem)
quelle
@import
Anweisung wird überhaupt nicht geändert und erscheint in der resultierenden CSS-Datei. Sass enthält nicht die referenzierte CSS-Datei, wie @GSto fragt. Es sieht so aus, als ob es in Sass 3.4 oder 4.0libsass
zumindest mit. Siehe die Antwort stackoverflow.com/questions/7111610/… und PR github.com/sass/libsass/pull/754*.css
genauso wie für*.css
Dateien" ist eine Tautologie. Du hast gedacht, dass einer von denen sein soll*.scss
, oder?Nachdem ich das gleiche Problem hatte, wurde ich mit allen Antworten hier und den Kommentaren über das Repository von Sass in Github verwechselt.
Ich möchte nur darauf hinweisen, dass dieses Problem im Dezember 2014 behoben wurde. Es ist jetzt möglich,
css
Dateien direkt in Ihre Sass-Datei zu importieren . Die folgende PR in Github löst das Problem.Die Syntax ist dieselbe wie jetzt -
@import "your/path/to/the/file"
ohne Erweiterung nach dem Dateinamen. Dadurch wird Ihre Datei direkt importiert. Wenn Sie*.css
am Ende anhängen , wird dies in diecss
Regel übersetzt@import url(...)
.Wenn Sie einige der "ausgefallenen" neuen Modulbündler wie Webpack verwenden , müssen Sie wahrscheinlich die Verwendung
~
am Anfang des Pfads verwenden. Wenn Sie also den folgenden Pfad importierennode_modules/bootstrap/src/core.scss
möchten, schreiben Sie so etwas wie@import "~bootstrap/src/core"
.HINWEIS:
Es scheint, dass dies nicht für alle funktioniert. Wenn Ihr Dolmetscher darauf basiert
libsass
, sollte er einwandfrei funktionieren (überprüfen Sie dies ). Ich habe mit@import
Node-Sass getestet und es funktioniert gut. Leider funktioniert dies und funktioniert bei einigen Ruby-Instanzen nicht.quelle
libsass
aber wenn Sie die Ruby-Implementierung von sass verwenden, scheint diese Syntax zu funktionieren, aber nur, wenn Sie diessass-css-importer
benötigt haben. Zumindest sehe ich das so. Kann das noch jemand bestätigen?ruby
mitnodejs
Interpreten. Haben Sie überprüft, ob Sie nach dem Dateinamen keine Erweiterung einfügen? Die korrekte Syntax ist@import "path/to/style/file
(ohne die.css
Erweiterung)Error: File to import not found or unreadable: cssdep/cssfile
. Wenn ich ein erstellecssdep/cssfile.scss
, funktioniert es plötzlich. Also keinruby -v
:ruby 2.2.2p95 (2015-04-13 revision 50295) [x64-mingw32]
sass -v
:Sass 3.4.17 (Selective Steve)
Nicht hier arbeiten@import "node_modules/normalize.css/normalize";
Sie müssen der CSS-Datei, die aufgenommen werden soll, einen Unterstrich voranstellen und ihre Erweiterung auf scss (z
_yourfile.scss
. B. :) ändern . Dann muss man es einfach so nennen:Und es wird den Inhalt der Datei enthalten, anstatt die CSS-Standardanweisung @import zu verwenden.
quelle
Dies wurde ab Version implementiert und zusammengeführt
3.2
( Pull # 754 wurde am 2. Januar 2015 zusammengeführt, für dielibsass
ursprünglich Probleme definiert wurden:sass
# 193 # 556 ,libsass
# 318 ).Um die lange Geschichte kurz zu machen, die Syntax folgt als nächstes:
um die rohe CSS-Datei zu importieren (einzuschließen)
Die Syntax ist am Ende ohne.css
Erweiterung (führt zum tatsächlichen Lesen des Teilss[ac]ss|css
und zum Einfügen in SCSS / SASS):@import "path/to/file";
die CSS-Datei auf herkömmliche Weise zu importieren
Die Syntax erfolgt auf traditionelle Weise mit der.css
Erweiterung am Ende (führt zu@import url("path/to/file.css");
Ihrem kompilierten CSS):@import "path/to/file.css";
Und es ist verdammt gut: Diese Syntax ist elegant und lakonisch sowie abwärtskompatibel! Es funktioniert hervorragend mit
libsass
undnode-sass
.__ __
Um weitere Spekulationen in Kommentaren zu vermeiden, schreiben Sie dies explizit: Ruby- basiertes Sass hat diese Funktion nach 7 Jahren Diskussion immer noch nicht implementiert . Zum Zeitpunkt des Schreibens dieser Antwort wird versprochen, dass es in 4.0 einen einfachen Weg geben wird, dies zu erreichen, wahrscheinlich mit Hilfe von
@use
. Es scheint, dass es sehr bald eine Implementierung geben wird. Das neue"geplante""Vorschlag angenommen" -Tag wurde für das Problem Nr. 556 und die neue@use
Funktion zugewiesen .Die Antwort wird möglicherweise aktualisiert, sobald sich etwas ändert .
quelle
Node-sass
ist eine Node.js-Bibliothek LibSass (die C-Version von Sass). Keine einzige Erwähnung, die auf Ruby basiertlibsass
odernode-sass
basiert, keine einzige Erwähnung der RUBY-Version nur in der ursprünglichen Frage. Bitte lesen Sie diese sorgfältig durch, bevor Sie das nächste Mal 3 Kommentare hintereinander schreiben. Ich habe alle Referenzen: Gemäß Ausgabe Nr. 193 ist es nach 5 Jahren Diskussion für die Ruby-Version immer noch nicht implementiert. Sie versprechen diese Funktionalität nur, wenn ver. 4.0 wird verfügbar sein.Gute Nachrichten an alle, Chris Eppstein hat ein Kompass-Plugin mit Inline-CSS-Importfunktion erstellt:
https://github.com/chriseppstein/sass-css-importer
Das Importieren einer CSS-Datei ist jetzt so einfach wie:
quelle
Wenn Sie eine
.css
Datei haben, die Sie nicht ändern möchten, und deren Erweiterung auch nicht ändern.scss
( z. B. stammt diese Datei aus einem gegabelten Projekt, das Sie nicht verwalten ), können Sie jederzeit einen Symlink erstellen und dann importieren in Ihre.scss
.Erstellt einen Symlink:
Importiert eine Symlink-Datei in ein Ziel
.scss
:Ihre Zielausgabedatei enthält
.css
Inhalte aus importierten Symlink-.scss
Dateien, keine CSS-Importregel ( von @yaz mit den höchsten Stimmen für Kommentare erwähnt ). Und Sie haben keine duplizierten Dateien mit unterschiedlichen Erweiterungen. Das bedeutet, dass alle in der ursprünglichen.css
Datei vorgenommenen Aktualisierungen sofort in Ihre Zielausgabe importiert werden.quelle
.css
und der erstellte Symlink) beispielsweise über ein gemeinsam genutztes Repository für alle verfügbar sind.mklink /H <link> <target>
und heißt hard link @mrsafraz.Sie können einen Drittanbieter verwenden
importer
, um die@import
Semantik anzupassen .node-sass-import-einmal , das mit node-sass (für Node.js) funktioniert, kann CSS -Importdateien inline importieren.
Beispiel für die direkte Verwendung:
Beispiel grunt-sass config:
Beachten Sie, dass Node-Sass-Import-Once derzeit keine Sass-Partials ohne einen explizit führenden Unterstrich importieren kann. Zum Beispiel mit der Datei
partials/_partial.scss
:@import partials/_partial.scss
gelingt es@import * partials/partial.scss
schlägt fehlBeachten Sie im Allgemeinen, dass ein benutzerdefinierter Importer die Importsemantik ändern kann . Lesen Sie die Dokumente, bevor Sie sie verwenden.
quelle
Wenn ich richtig bin, ist CSS mit SCS kompatibel, sodass Sie die Erweiterung eines CSS in SCS ändern können und es weiterhin funktionieren sollte. Sobald Sie die Erweiterung geändert haben, können Sie sie importieren und sie wird in die Datei aufgenommen.
Wenn Sie dies nicht tun, verwendet sass das CSS @import, was Sie nicht wollen.
quelle
Ich fand einen eleganten, Rails-ähnlichen Weg, dies zu tun. Benennen Sie zuerst Ihre
.scss
Datei in um.scss.erb
und verwenden Sie dann die folgende Syntax (Beispiel für das CSS-Asset "light_js-rails4 gem " ):Warum können Sie die Datei nicht direkt über SCSS hosten? :
Das Ausführen eines
@import
in SCSS funktioniert für CSS-Dateien einwandfrei, solange Sie den vollständigen Pfad explizit auf die eine oder andere Weise verwenden.rails s
Versorgt Assets im Entwicklungsmodus, ohne sie zu kompilieren, sodass ein Pfad wie dieser funktioniert ...... weil der gehostete Pfad buchstäblich ist
/assets/highlight_js/github.css
. Wenn Sie mit der rechten Maustaste auf die Seite klicken und "Quelle anzeigen" und dann auf den Link für das Stylesheet mit den obigen Angaben klicken@import
, wird dort eine Zeile angezeigt, die wie folgt aussieht:Die SCSS-Engine übersetzt
"highlight_js/github.css"
inurl(highlight_js/github.css)
. Dies funktioniert reibungslos, bis Sie versuchen, es in der Produktion auszuführen, in der Assets vorkompiliert werden und ein Hash in den Dateinamen eingefügt wird. Die SCSS-Datei wird weiterhin in eine statische Datei aufgelöst/assets/highlight_js/github.css
, die nicht vorkompiliert wurde und in der Produktion nicht vorhanden ist.So funktioniert diese Lösung:
Erstens haben wir durch Verschieben der
.scss
Datei.scss.erb
das SCSS effektiv in eine Vorlage für Rails verwandelt. Nun, wann immer wir verwenden<%= ... %>
Vorlagen-Tags verwenden, ersetzt der Rails-Vorlagenprozessor diese Snippets durch die Ausgabe des Codes (genau wie bei jeder anderen Vorlage).Das Angeben
asset_path("highlight_js/github")
in der.scss.erb
Datei bewirkt zwei Dinge:rake assets:precompile
Aufgabe zum Vorkompilieren der entsprechenden CSS-Datei aus.Dies bedeutet auch, dass die SCSS-Engine nicht einmal die CSS-Datei analysiert. Es wird nur ein Link dazu gehostet! Es gibt also keine hokey Affenflecken oder grobe Problemumgehungen. Wir stellen ein CSS-Asset wie vorgesehen über SCSS bereit und verwenden eine URL zu diesem CSS-Asset wie beabsichtigt. Süss!
quelle
Einfache Problemumgehung:
Alle oder fast alle CSS-Dateien können auch so interpretiert werden, als wäre es scss. Sie können sie auch in einen Block importieren. Benennen Sie das CSS in scss um und importieren Sie es so.
In meiner aktuellen Konfiguration mache ich Folgendes:
Zuerst kopiere ich die CSS-Datei in eine temporäre, diesmal mit der Erweiterung .scss. Grunzen Beispielkonfiguration:
Dann können Sie die .scss-Datei von Ihrem übergeordneten scss importieren (in meinem Beispiel wird sie sogar in einen Block importiert):
Hinweis: Dies kann gefährlich sein, da das CSS effektiv mehrmals analysiert wird. Überprüfen Sie Ihr ursprüngliches CSS darauf, ob es ein von SCSS interpretierbares Artefakt enthält (es ist unwahrscheinlich, aber wenn es passiert, ist das Ergebnis schwer zu debuggen und gefährlich).
quelle
Es ist jetzt möglich mit:
quelle
sass-css-importer
installiert ist, wird sass mit switch aufgerufen-r sass-css-importer
und.css
aus dem Dateipfad weggelassenIch kann bestätigen, dass dies funktioniert:
Dank an Chriss Epstein: https://github.com/sass/sass/issues/193
quelle
Einfach.
@import "path / to / file.css";
quelle