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

Wenn Sie eine .css Datei, die Sie nicht ändern wollen, weder die Erweiterung in .scss ( z.B. diese Datei stammt aus einem geforketen Projekt, das Sie nicht betreuen ), können Sie jederzeit einen Symlink erstellen und ihn dann importieren in Ihr .scss .

Erzeugt einen Symlink:

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

Importiert Symlink-Datei in ein Ziel .scss :

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

Ihr Leistungsziel .css Datei wird den Inhalt des importierten Symlinks enthalten .scss Datei, nicht eine CSS-Importregel ( erwähnt von @yaz mit den meisten Kommentarstimmen ). Und Sie haben keine doppelten Dateien mit unterschiedlichen Erweiterungen, was bedeutet, dass jede Aktualisierung, die innerhalb der ursprünglichen .css Datei wird sofort in Ihre Zielausgabe importiert.

Symbolischer Link (auch Symlink oder Softlink) ist eine besondere Art von Datei der einen Verweis auf eine andere Datei in Form eines absoluten oder relativen Pfades enthält und die Auflösung von Pfadnamen beeinflusst.
- http://en.wikipedia.org/wiki/Symbolic_link

Answer 2

Sie können einen Drittanbieter verwenden importer zum Anpassen @import Semantik.

node-sass-import-once , die mit node-sass (für Node.js) kann CSS-Dateien inline importieren.

Beispiel für eine direkte Verwendung:

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

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

Ejemplo grunt-sass Konfiguration:

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-Teilsätze ohne einen expliziten führenden Unterstrich importieren kann. Zum Beispiel mit der Datei partials/_partial.scss :

• @import partials/_partial.scss tritt die Nachfolge von an.
• @import * partials/partial.scss scheitert

Im Allgemeinen ist zu beachten, dass ein benutzerdefinierter Importeur die jede Semantik importieren. Lesen Sie die Dokumentation, bevor Sie es verwenden.

Answer 3

Wenn ich richtig liege, ist css mit scss kompatibel, so dass Sie die Erweiterung eines css in scss ändern können und es sollte weiterhin funktionieren. Sobald Sie die Erweiterung ändern, können Sie sie importieren und sie wird in die Datei aufgenommen.

Wenn Sie das nicht tun, wird Sass den css @import verwenden, was Sie nicht wollen.

Answer 4

Um eine css-Datei in scss zu importieren, verwenden Sie einfach den folgenden Befehl: @import "src/ihr_dateipfad"; ohne die Endung .css am Ende

Answer 5

Ich habe eine elegante, Rails-ähnliche Lösung gefunden. Benennen Sie zunächst Ihre .scss Datei zu .scss.erb , dann verwenden Sie eine Syntax wie diese (Beispiel für highlight_js-rails4 gem CSS asset ):

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

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

Die Durchführung einer @import in SCSS funktioniert gut für CSS-Dateien, solange Sie explizit den vollständigen Pfad so oder so verwenden. Im Entwicklungsmodus, rails s stellt Assets bereit, ohne sie zu kompilieren, so dass ein Pfad wie dieser funktioniert...

@import "highlight_js/github.css";

...denn der gehostete Pfad ist buchstäblich /assets/highlight_js/github.css . Wenn Sie mit der rechten Maustaste auf die Seite klicken und "Quelltext anzeigen", dann klicken Sie auf den Link für das Stylesheet mit dem oben genannten @import sehen Sie dort eine Zeile, die wie folgt aussieht:

@import url(highlight_js/github.css);

Die SCSS-Engine übersetzt "highlight_js/github.css" a url(highlight_js/github.css) . Dies funktioniert problemlos, bis Sie versuchen, es in der Produktion auszuführen, wo Assets vorkompiliert sind und ein Hash in den Dateinamen eingefügt wurde. Die SCSS-Datei wird immer noch in eine statische /assets/highlight_js/github.css die nicht vorkompiliert wurde und in der Produktion nicht existiert.

So funktioniert diese Lösung:

Erstens, durch das Verschieben der .scss Datei zu .scss.erb haben wir die SCSS effektiv in eine Vorlage für Rails verwandelt. Nun, wann immer wir verwenden <%= ... %> Template-Tags, wird der Rails-Template-Prozessor diese Schnipsel durch die Ausgabe des Codes ersetzen (genau wie bei jedem anderen Template).

Angabe von asset_path("highlight_js/github") im .scss.erb Datei erfüllt zwei Aufgaben:

1. Löst die rake assets:precompile Aufgabe, um die entsprechende CSS-Datei vorzukompilieren.
2. Erzeugt eine URL, die das Asset unabhängig von der Rails-Umgebung angemessen wiedergibt.

Das bedeutet auch, dass die SCSS-Engine die CSS-Datei gar nicht analysiert, sondern nur einen Link zu ihr bereitstellt! Es gibt also keine ausgefallenen Patches oder grobe Workarounds. Wir stellen ein CSS-Asset über SCSS bereit, wie vorgesehen, und verwenden eine URL zu diesem CSS-Asset, wie von Rails vorgesehen. Klasse!