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

So importieren Sie eine reguläre CSS-Datei in Sass:

Offizielle Sass-Dokumentation: CSS in Sass importieren

Answer 2

Einfache Abhilfe:

Alle oder fast alle css-Dateien können auch so interpretiert werden, als ob es sich um scss handeln würde. Es ermöglicht auch, sie innerhalb eines Blocks zu importieren. Benennen Sie die css-Datei in scss um, und importieren Sie sie so.

In meiner aktuellen Konfiguration gehe ich wie folgt vor:

Zuerst kopiere ich die .css-Datei in eine temporäre Datei, diesmal mit der Erweiterung .scss. Grunt Beispiel Konfiguration:

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 aus Ihrer übergeordneten scss-Datei importieren (in meinem Beispiel wird sie sogar in einen Block importiert):

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

Hinweis: Dies könnte gefährlich sein, weil es effektiv dazu führt, dass die CSS mehrfach geparst wird. Überprüfen Sie Ihr Original-CSS darauf, ob es ein scss-interpretierbares Artefakt enthält (es ist unwahrscheinlich, aber wenn es passiert, wird das Ergebnis schwer zu debuggen und gefährlich sein).

Answer 3

Das ist jetzt möglich:

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

Answer 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

Answer 5

Einfach.

@import "pfad/zu/file.css";