Importować zwykły plik CSS do pliku SCSS?

Po tym samym numerze, pomyliłem się ze wszystkimi odpowiedziami tutaj i komentarzami nad repozytorium sass w GitHubie.

Chcę tylko zaznaczyć, że od grudnia 2014 roku problem ten został rozwiązany. Teraz Można importować pliki css bezpośrednio do pliku sass. Poniższy PR w GitHubie rozwiązuje problem.

Składnia jest taka sama jak now - @import "your/path/to/the/file", bez rozszerzenia po nazwie pliku. Spowoduje to bezpośredni import Twojego pliku. Po dodaniu *.css na końcu przełoży się na css regułę @import url(...).

W przypadku, gdy używasz niektórych "fantazyjnych" nowych pakietów modułów, takich jak webpack , prawdopodobnie będziesz musiał użyć use ~ na początku ścieżki. Więc, jeśli chcesz zaimportować następującą ścieżkę node_modules/bootstrap/src/core.scss, napiszesz coś w stylu
@import "~bootstrap/src/core".

Uwaga:
Wygląda na to, że to nie działa na wszystkich. Jeśli twój interpreter opiera się na libsass to powinien działać poprawnie (zamówienie to ). Testowałem używając @import na node-sass i działa dobrze. Niestety to działa i nie działa na niektórych instancjach Rubiego.

Należy przedłożyć podkreślenie do pliku css, który ma być dołączony, I zmienić jego rozszerzenie na scss (np: _yourfile.scss). W takim razie wystarczy tak to nazwać:

@import "yourfile";

I będzie zawierać zawartość pliku, zamiast używać standardowej dyrektywy CSS @import.

To zostało zaimplementowane I scalone począwszy od wersji 3.2 (pull #754 scalony w dniu 2 sty 2015 dla libsass, zagadnienia pierwotnie zostały zdefiniowane tutaj: sass#193 #556, libsass#318).

Aby skrócić długą historię, składnia w następnym:

1. Aby zaimportować (załączyć) surowy plik CSS

   składnia jest BEZ .css rozszerzenie na końcu (powoduje rzeczywisty odczyt częściowego s[ac]ss|css i włączenie it inline to SCSS/SASS):

   @import "path/to/file";

2. Aby zaimportować plik CSS w tradycyjny sposób

   składnia idzie w tradycyjny sposób, z .css rozszerzeniem na końcu (wyniki do @import url("path/to/file.css"); w skompilowanym CSS):

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

I to jest cholernie dobre: ta składnia jest elegancka i lakoniczna, Plus wstecznie kompatybilna! Doskonale współpracuje z libsass i node-sass.

__

Aby uniknąć dalszych spekulacji w komentarzach, pisząc to explicite: Ruby based Sass nadal ma tę funkcję unimplemented po 7 latach dyskusji. W momencie pisania tej odpowiedzi obiecuje się, że w 4.0 będzie prosty sposób, aby to osiągnąć, prawdopodobnie z pomocą @use. Wydaje się, że wkrótce będzie implementacja, nowy "planned" "Proposal Accepted" tag został przypisany do issue #556 i nowa funkcja @use.

odpowiedź może być aktualizacja, jak tylko coś się zmieni .

Dobra wiadomość dla wszystkich, Chris Eppstein stworzył wtyczkę compass z wbudowaną funkcją importu css:

Https://github.com/chriseppstein/sass-css-importer

Teraz Importowanie pliku CSS jest tak proste jak:

@import "CSS:library/some_css_file"

Jeśli Masz plik .css, którego nie chcesz modyfikować, nie zmieniaj jego rozszerzenia na .scss (np. plik pochodzi z rozwidlonego projektu, którego nie utrzymujesz), zawsze możesz utworzyć dowiązanie symboliczne, a następnie zaimportować je do swojego .scss.

Tworzy dowiązanie symboliczne:

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

importuje plik dowiązania symbolicznego do celu .scss:

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

plik docelowy .css będzie zawierał zawartość importowanego pliku symbolicznego .scss, a nie regułę importu CSS (wspomniany przez @yaz z najwyższymi komentarzami ). I nie masz zduplikowanych plików z różnymi rozszerzeniami, co oznacza, że każda aktualizacja wykonana w początkowym pliku .css natychmiast zostanie zaimportowana do docelowego wyjścia.

Dowiązanie symboliczne (także dowiązanie symboliczne lub dowiązanie miękkie) Jest specjalnym typem pliku który zawiera odniesienie do innego pliku w postaci bezwzględnej lub ścieżka względna i to wpływa na rozdzielczość ścieżki.
– http://en.wikipedia.org/wiki/Symbolic_link

Możesz użyć strony trzeciej importer, aby dostosować semantykę @import.

Node-Sass-import-once, który działa z node-Sass (dla Node.js) może importować pliki CSS inline.

Przykład użycia bezpośredniego:

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

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

Przykład 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"
      }
    }
  });

Zauważ, że node-Sass-import-once nie może obecnie importować częściowych elementów Sass bez wyraźnego podkreślenia. Na przykład z plikiem partials/_partial.scss:

• @import partials/_partial.scss succes
• @import * partials/partial.scss

Ogólnie należy pamiętać, że importer niestandardowy może zmienić dowolną semantykę importu. Przeczytaj dokumenty przed rozpoczęciem korzystania z nich.

If I am correct css is compatible with scss so you can change the extension of a css to scss and it should continue to work. Po zmianie rozszerzenia można go zaimportować i zostanie on dołączony do pliku.

Jeśli tego nie zrobisz, sass użyje css @import, który jest czymś, czego nie chcesz.

Wymyśliłem na to elegancki, podobny do szyn sposób. Najpierw zmień nazwę pliku .scss na .scss.erb, a następnie użyj składni w następujący sposób (przykład dla highlight_js-rails4 gem CSS asset):

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

Dlaczego nie można hostować pliku bezpośrednio przez SCSS :

Robienie @import W SCSS działa dobrze dla plików CSS, o ile jawnie używasz pełnej ścieżki w ten czy inny sposób. W trybie deweloperskim rails s służy zasobom bez ich kompilacji, więc ścieżka taka jak ta działa...

@import "highlight_js/github.css";

...ponieważ hostowana ścieżka jest dosłownie /assets/highlight_js/github.css. Jeśli klikniesz prawym przyciskiem myszy na stronie i "pokaż źródło", a następnie kliknij link do arkusza stylów z powyższym @import, zobaczysz tam wiersz, który wygląda następująco:

@import url(highlight_js/github.css);

Silnik SCSS tłumaczy "highlight_js/github.css" na url(highlight_js/github.css). Będzie to działać płynnie, dopóki nie zdecydujesz się uruchomić go w produkcji, gdzie zasoby są wstępnie skompilowane, a hash zostanie wprowadzony do nazwy pliku. Plik SCSS nadal zostanie rozwiązany do statycznego /assets/highlight_js/github.css to nie było prekompilowane i nie istnieje w produkcji.

Jak działa To rozwiązanie:

Po pierwsze, przenosząc plik .scss do .scss.erb, skutecznie zamieniliśmy SCSS w szablon dla Rails. Teraz, gdy używamy znaczników szablonów <%= ... %>, procesor szablonów Rails zastąpi te fragmenty kodem wyjściowym (tak jak każdy inny szablon).

Stwierdzenie asset_path("highlight_js/github") w pliku .scss.erb robi dwie rzeczy:

1. uruchamia rake assets:precompile zadanie aby wstępnie skompilować odpowiedni plik CSS.
2. generuje adres URL, który odpowiednio odzwierciedla zasób niezależnie od środowiska Rails.

Oznacza to również, że silnik SCSS nawet nie parsuje pliku CSS; to tylko hosting link do niego! Więc nie ma żadnych łatek ani obejść. Obsługujemy zasób CSS poprzez SCSS zgodnie z przeznaczeniem i używamy adresu URL do wspomnianego zasobu CSS zgodnie z przeznaczeniem Rails. Super!

Proste obejście:

Wszystkie lub prawie wszystkie pliki css mogą być również interpretowane tak, jakby były scss. Umożliwia również importowanie ich wewnątrz bloku. Zmień nazwę css na scss i zaimportuj go tak.

W mojej rzeczywistej konfiguracji wykonuję następujące czynności:

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

Następnie można zaimportować .plik scss z twojego rodzica scss (w moim przykładzie jest nawet zaimportowany do "blok"): {]}

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

Uwaga: Może to być niebezpieczne, ponieważ skutecznie spowoduje, że css będzie parsowany wiele razy. Sprawdź, czy oryginalny css zawiera jakikolwiek artefakt interpretowalny przez scss (jest to nieprawdopodobne, ale jeśli tak się stanie, wynik będzie trudny do debugowania i niebezpieczny).

Na sass 3.5.5 to działa

@import url ('yourStyle.css")

Jest to teraz możliwe za pomocą:

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

Mogę potwierdzić, że to działa:

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

Kredyt dla Chrissa Epsteina: https://github.com/sass/sass/issues/193

Proste.

@import " ścieżka / do / pliku.css";