Normale CSS-Datei in SCSS-Datei importieren?

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

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)

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.

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.

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 .

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"

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

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.

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.

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!

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

Es ist jetzt möglich mit:

@import 'CSS:directory/filename.css';

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

Einfach.

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