Normale CSS-Datei in SCSS-Datei importieren?

509

Gibt es überhaupt eine Möglichkeit, eine reguläre CSS-Datei mit dem @importBefehl 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

GSto
quelle
1
Ja, es gibt einen Weg: Entfernen Sie einfach die Erweiterung '.css' im CSS-Dateipfad in der @ input-Anweisung :) (funktioniert für die Sass-Version> = 3.2)
Kamil Kiełczewski
Ab 2018 sollte die Verwendung von SASS@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.
Álvaro González

Antworten:

215

Sieht so aus, als wäre dies zum Zeitpunkt des Schreibens nicht implementiert:

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

Bei libsass (C / C ++ - Implementierung) funktioniert *.cssder Import genauso wie bei *.scssDateien - lassen Sie einfach die Erweiterung weg :

@import "path/to/file";

Dies wird importiert path/to/file.css.

Siehe diese Antwort für weitere Details.

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

Stephen Fuhry
quelle
23
@kleinfreund stimmt nicht mit Sass 3.3.1. Die @importAnweisung 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.0
implementiert wird
1
Wenn Sie Gulp oder Grunt verwenden, verwenden Sie einfach ein anderes Tool, um Ihre CSS-Dateien zu importieren. Dies ist einfacher und funktioniert jetzt . Ich benutze gulp-import-css , ich bin mir nicht sicher, was das Grunt-Äquivalent ist.
Fregante
3
Es funktioniert libsasszumindest mit. Siehe die Antwort stackoverflow.com/questions/7111610/… und PR github.com/sass/libsass/pull/754
ivn
"Der Import funktioniert *.cssgenauso wie für *.cssDateien" ist eine Tautologie. Du hast gedacht, dass einer von denen sein soll *.scss, oder?
underscore_d
1
Ab Version 3.5.3 warnt libsass, dass dies kein Standardverhalten ist und nicht als verlässlich angesehen werden sollte. (Stattdessen "Verwenden Sie einen benutzerdefinierten Importer, um dieses Verhalten beizubehalten.") Github.com/sass/libsass/releases/tag/3.5.3
iX3
383

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, cssDateien 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 *.cssam Ende anhängen , wird dies in die cssRegel ü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 importieren node_modules/bootstrap/src/core.scssmö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 @importNode-Sass getestet und es funktioniert gut. Leider funktioniert dies und funktioniert bei einigen Ruby-Instanzen nicht.

tftd
quelle
1
Dies scheint implementiert zu sein, libsassaber wenn Sie die Ruby-Implementierung von sass verwenden, scheint diese Syntax zu funktionieren, aber nur, wenn Sie dies sass-css-importerbenötigt haben. Zumindest sehe ich das so. Kann das noch jemand bestätigen?
Bsara
5
Bist du sicher, dass du die neueste Version von sass hast? Ich benutze diese Syntax seit einer Weile und sie funktioniert sowohl mit als auch rubymit nodejsInterpreten. Haben Sie überprüft, ob Sie nach dem Dateinamen keine Erweiterung einfügen? Die korrekte Syntax ist @import "path/to/style/file(ohne die .cssErweiterung)
tftd
4
Ich verwende Ruby Sass v3.4.18 (mit Jekyll) gemäß meinem Gemfile.lock. Immer noch sehen Error: File to import not found or unreadable: cssdep/cssfile. Wenn ich ein erstelle cssdep/cssfile.scss, funktioniert es plötzlich. Also kein
Pfadproblem
1
ruby -v: ruby 2.2.2p95 (2015-04-13 revision 50295) [x64-mingw32] sass -v: Sass 3.4.17 (Selective Steve)Nicht hier arbeiten
Cyril CHAPON
5
Danke dafür! Ich konnte normalize.css mit node-sass mit@import "node_modules/normalize.css/normalize";
Nick
260

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:

@import "yourfile";

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

David Morales
quelle
1
Es geht vielleicht um Konventionen und Standards.
David Morales
70
Der Unterstrich soll verhindern, dass es als separate Datei kompiliert wird.
Jonah
4
Falls sich jemand wundert, funktioniert dies, weil die SCSS-Syntax von Sass eine Obermenge von CSS3 ist. Deshalb wird auch das Semikolon benötigt.
Jacob Wan
46
Sie können beispielsweise die Erweiterung einer Hersteller-CSS-Datei nicht ändern.
Slava Fomin II
7
Wenn es auf Ihrem Computer / Server ist, können Sie! Und es gibt auch symbolische Links, wenn Sie dies nicht möchten.
Ste
260

Dies wurde ab Version implementiert und zusammengeführt 3.2( Pull # 754 wurde am 2. Januar 2015 zusammengeführt, für die libsassursprünglich Probleme definiert wurden: sass# 193 # 556 , libsass# 318 ).

Um die lange Geschichte kurz zu machen, die Syntax folgt als nächstes:

  1. um die rohe CSS-Datei zu importieren (einzuschließen)

    Die Syntax ist am Ende ohne.css Erweiterung (führt zum tatsächlichen Lesen des Teils s[ac]ss|cssund zum Einfügen in SCSS / SASS):

    @import "path/to/file";

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

    Die Syntax erfolgt auf traditionelle Weise mit der .cssErweiterung 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 libsassund node-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 @useFunktion zugewiesen .

Die Antwort wird möglicherweise aktualisiert, sobald sich etwas ändert .

Farside
quelle
3
Nur um das zu verdeutlichen, funktionierte das Importieren des CSS als Sass für mich wie folgt: @import url ("Pfad / zu / Datei-ohne-CSS-Erweiterung");
Craig Wayne
1
Dies funktioniert in der Ruby-basierten Version von Sass nicht wirklich. Beispiel: Der Befehl: sass myFile.scss: output.css schlägt beim CSS-Import fehl, funktioniert jedoch, wenn Sie die Erweiterung der CSS-Datei in .scss ändern. Führen Sie zum Zeitpunkt des Schreibens dieses Kommentars die neueste Version aus: 3.4.22 / Selective Steve. Dies betrifft auch alle Task-Läufer, die die Ruby-Version verwenden, wie z. B. grunt-contrib-sass.
Ansorensen
@ansorensen, ich denke, es gibt Verwirrung von Ihrer Seite. Was meinst du mit "funktioniert, wenn du die Erweiterung der CSS-Datei in .scss änderst" ? Die ganze Idee war genau regelmäßig CSS-Dateien und zwei Möglichkeiten, mit ihnen zu arbeiten (nicht mit dem Importieren von SCSS verwechseln). Bitte lesen Sie noch einmal die Frage und die Antwort.
Farside
@ Farside Keine Verwirrung. Die Importsyntax 'Pfad / zu / Datei' funktioniert in der neuesten Version des Sass-Edelsteins in Ruby nicht. Wenn ich sass mit einem Import ausführe, funktioniert der Import erfolgreich, wenn die Datei im importierten Pfad die Erweiterung .scss hat und fehlschlägt, wenn die Datei eine CSS-Erweiterung hat. In der Frage wird nach einem Import von CSS in SCS gefragt, und Sie geben eine Antwort für lib-sass & node-sass. Ich kommentiere, dass diese Funktionalität nicht in den Ruby-basierten Versionen von Sass enthalten ist.
Ansorensen
1
@ansorensen, omg, so viele Texte von dir ... Ich war explizit und verwirre niemanden. Node-sassist eine Node.js-Bibliothek LibSass (die C-Version von Sass). Keine einzige Erwähnung, die auf Ruby basiert libsassoder node-sassbasiert, 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.
Farside
37

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:

@import "CSS:library/some_css_file"
Rafal Pastuszak
quelle
3
Fehlgeschlagen aufgrund der Verwendung eines veralteten Startpunkts. "Was ist, kann aber niemals sein ..." Ich bin sicher, es war großartig, als es herauskam, aber es braucht ein Update, um wieder zu funktionieren, oder Sie müssen veraltete Plugins installieren. Vielen Dank, C§
CSS
18

Wenn Sie eine .cssDatei 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:

ln -s path/to/css/file.css path/to/sass/files/_file.scss


Importiert eine Symlink-Datei in ein Ziel .scss:

@import "path/to/sass/files/file";


Ihre Zielausgabedatei enthält.css Inhalte aus importierten Symlink- .scssDateien, 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 .cssDatei vorgenommenen Aktualisierungen sofort in Ihre Zielausgabe importiert werden.

Symbolischer Link (auch Symlink oder Softlink) ist ein spezieller Dateityp, der einen Verweis auf eine andere Datei in Form eines absoluten oder relativen Pfads enthält und die Pfadnamenauflösung beeinflusst.
- http://en.wikipedia.org/wiki/Symbolic_link

Nik Sumeiko
quelle
9
Das Hinzufügen eines Symlinks ist keine sehr portable Lösung (dh mehrere Entwickler oder Build-Systeme)
LocalPCGuy
@LocalPCGuy ist es, wenn beide Dateien ( .cssund der erstellte Symlink) beispielsweise über ein gemeinsam genutztes Repository für alle verfügbar sind.
Nik Sumeiko
Ich habe das gerade gemacht und wollte über Sym-Links in diesem Thread antworten, bin aber froh, dass es schon da ist! Es ist wahr, dass diese Notwendigkeit selten ist, aber meine Situation bestand darin, die CSS-Datei überhaupt nicht ändern zu wollen (weil es sich um eine Bower-Datei handelte), also einen Symlink zu erstellen und zu importieren, der perfekt funktionierte.
Aaron Krauss
2
Für Windows- Benutzer hat dieselbe Funktionalität eine andere Syntax mklink /H <link> <target>und heißt hard link @mrsafraz.
Farside
5

Sie können einen Drittanbieter verwenden importer, um die @importSemantik 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:

var sass = require('node-sass');,
    importOnce = require('node-sass-import-once');

sass.render({
  file: "input.scss",
  importer: importOnce,
  importOnce: {
    css: true,
  }
});

Beispiel grunt-sass config:

var importOnce = require("node-sass-import-once");
grunt.loadNpmTasks("grunt-sass");

grunt.initConfig({
  sass: {
    options: {
      sourceMap: true,
      importer: importOnce
    },
    dev: {
      files: {
        "dist/style.css": "scss/**/*.scss"
      }
    }
  });

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 fehl

Beachten Sie im Allgemeinen, dass ein benutzerdefinierter Importer die Importsemantik ändern kann . Lesen Sie die Dokumente, bevor Sie sie verwenden.

Joews
quelle
4

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.

Pickels
quelle
16
Leider sind die importierten CSS-Dateien manchmal außerhalb Ihrer Kontrolle, wie in einer Bibliothek, die einige statische Assets verpackt.
Eric Drechsel
2

Ich fand einen eleganten, Rails-ähnlichen Weg, dies zu tun. Benennen Sie zuerst Ihre .scssDatei in um .scss.erbund verwenden Sie dann die folgende Syntax (Beispiel für das CSS-Asset "light_js-rails4 gem " ):

@import "<%= asset_path("highlight_js/github") %>";

Warum können Sie die Datei nicht direkt über SCSS hosten? :

Das Ausführen eines @importin SCSS funktioniert für CSS-Dateien einwandfrei, solange Sie den vollständigen Pfad explizit auf die eine oder andere Weise verwenden. rails sVersorgt Assets im Entwicklungsmodus, ohne sie zu kompilieren, sodass ein Pfad wie dieser funktioniert ...

@import "highlight_js/github.css";

... 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:

@import url(highlight_js/github.css);

Die SCSS-Engine übersetzt "highlight_js/github.css"in url(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 .scssDatei .scss.erbdas 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.erbDatei bewirkt zwei Dinge:

  1. Löst die rake assets:precompileAufgabe zum Vorkompilieren der entsprechenden CSS-Datei aus.
  2. Generiert eine URL, die das Asset unabhängig von der Rails-Umgebung angemessen widerspiegelt.

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!

Synthead
quelle
Für mich wirkt die Lösung etwas zwielichtig und klingt eher nach einem Hack. Aber es ist ein guter Job bei Ermittlungen!
Farside
0

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:

copy: {
    dev: {
        files: [
            {
                src: "node_modules/some_module/some_precompiled.css",
                dest: "target/resources/some_module_styles.scss"
            }
        ]
    }
}

Dann können Sie die .scss-Datei von Ihrem übergeordneten scss importieren (in meinem Beispiel wird sie sogar in einen Block importiert):

my-selector {
  @import "target/resources/some_module_styles.scss";
  ...other rules...
}

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).

Peter - Setzen Sie Monica wieder ein
quelle
-3

Es ist jetzt möglich mit:

@import 'CSS:directory/filename.css';
Shlomi Schwartz
quelle
3
Nur wenn gem sass-css-importerinstalliert ist, wird sass mit switch aufgerufen -r sass-css-importerund .cssaus dem Dateipfad weggelassen
Bernhard Döbler
-4

Ich kann bestätigen, dass dies funktioniert:

class CSSImporter < Sass::Importers::Filesystem
  def extensions
    super.merge('css' => :scss)
  end
end

view_context = ActionView::Base.new
css = Sass::Engine.new(
  template,
  syntax:     :scss,
  cache:      false,
  load_paths: Rails.application.assets.paths,
  read_cache: false,
  filesystem_importer: CSSImporter # Relevant option,

  sprockets:  {
    context:     view_context,
    environment: Rails.application.assets
  }
).render

Dank an Chriss Epstein: https://github.com/sass/sass/issues/193

Macario
quelle
1
Wie können Sie dies in Ihrer scss-Datei verwenden?
Adrian Ber
-10

Einfach.

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

Adam Stacoviak
quelle
6
Ich habe es versucht, aber es wird den Inhalt der Datei beim Komprimieren nicht in diese Datei ziehen, sondern nur die @ import-Zeile beibehalten.
GSto
1
Antwort mit der niedrigsten Punktzahl, aber ironischerweise scheint dies jetzt der richtige Weg zu sein. Das Einfügen des Suffix ist das Richtige.
Wyck