Zaimportować zwykły plik CSS do pliku SCSS?

Czy można zaimportować zwykły plik CSS za pomocą @importpolecenia Sassa ? Chociaż nie używam całej składni SCSS z sass, nadal cieszę się, że łączy / kompresuje funkcje i chciałbym móc go używać bez zmiany nazwy wszystkich moich plików na * .scss

Wygląda na to, że nie jest to zaimplementowane w momencie pisania tego tekstu:

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

W przypadku libsass (implementacja C / C ++) import działa *.csstak samo jak w przypadku *.scssplików - po prostu pomiń rozszerzenie:

@import "path/to/file";

Spowoduje to zaimportowanie path/to/file.css .

Zobacz tę odpowiedź, aby uzyskać więcej informacji.

Zobacz tę odpowiedź dotyczącą implementacji Ruby (klejnot sass)

Po tym samym problemie pomyliłem się ze wszystkimi odpowiedziami tutaj i komentarzami do repozytorium sass w github.

Chciałbym tylko zaznaczyć, że od grudnia 2014 r. Problem został rozwiązany. Teraz można importować csspliki bezpośrednio do pliku sass. Następujący PR w github rozwiązuje ten problem.

Składnia jest taka sama jak teraz - @import "your/path/to/the/file"bez rozszerzenia po nazwie pliku. Spowoduje to bezpośrednie zaimportowanie pliku. Jeśli dodasz *.cssna końcu, przełoży się to na cssregułę@import url(...) .

W przypadku korzystania z „fantazyjnych” nowych programów pakujących moduły, takich jak webpack , prawdopodobnie będziesz musiał użyć ~tego na początku ścieżki. Jeśli chcesz zaimportować następującą ścieżkę node_modules/bootstrap/src/core.scss, napisz coś w stylu
@import "~bootstrap/src/core".

UWAGA:
Wygląda na to, że nie działa to dla wszystkich. Jeśli twój tłumacz jest oparty na libsassnim, powinien działać dobrze (sprawdź to ). Testowałem przy użyciu @importsass węzłów i działa dobrze. Niestety działa to i nie działa w niektórych instancjach ruby.

Musisz dołączyć znak podkreślenia do pliku css, który ma zostać dołączony, i zmienić jego rozszerzenie na scss (np _yourfile.scss. :) . Następnie musisz to tak nazwać:

@import "yourfile";

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

Zostało to zrealizowane i scalone od wersji 3.2( przyciąganie # 754 połączyły się 2 stycznia 2015 o libsasskwestie oryginalnie zostały zdefiniowane tutaj: sass# 193 # 556 , libsass# 318 ).

Krótko mówiąc, składnia w następnym:

1. aby zaimportować (dołączyć) nieprzetworzony plik CSS

   składnia nie.css ma rozszerzenia na końcu (powoduje faktyczne odczytanie częściowego s[ac]ss|cssi dołączenie go do SCSS / SASS):

   @import "path/to/file";

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

   składnia przebiega w tradycyjny sposób, z .cssrozszerzeniem na końcu (wyniki @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, a ponadto kompatybilna wstecz! Działa doskonale z libsassi node-sass.

__

Aby uniknąć dalszych spekulacji w komentarzach, pisz to wprost: Sass oparty na Ruby nadal ma tę funkcję niezaimplementowaną po 7 latach dyskusji. Do czasu napisania tej odpowiedzi obiecano, że w 4.0 będzie prosty sposób na osiągnięcie tego, prawdopodobnie z pomocą . Wygląda na to, że już niedługo nastąpi implementacja, nowy numer „planowanej” „Oferty zaakceptowanej” został przypisany do problemu nr 556 i nowej funkcji.@use@use

odpowiedź może zostać zaktualizowana, gdy tylko coś się zmieni .

Dobra wiadomość dla wszystkich, Chris Eppstein stworzył wtyczkę kompasu 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 .cssplik, którego nie chcesz modyfikować, nie zmieniaj jego rozszerzenia na .scss( np. Ten plik pochodzi z projektu, którego nie zarządzasz ), zawsze możesz utworzyć dowiązanie symboliczne, a następnie zaimportować go 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";

Docelowy .cssplik wyjściowy będzie przechowywał zawartość importowanego .scsspliku dowiązania symbolicznego , a nie regułę importu CSS ( wspomnianą przez @yaz z największą liczbą głosów w komentarzach ). Nie masz zduplikowanych plików z różnymi rozszerzeniami, co oznacza, że ​​każda aktualizacja dokonana w .csspliku początkowym jest natychmiast importowana do pliku docelowego.

Łącze symboliczne (również dowiązanie symboliczne lub miękkie) to specjalny typ pliku, który zawiera odniesienie do innego pliku w postaci ścieżki bezwzględnej lub względnej i wpływa na rozpoznawanie nazw ścieżek.
- http://en.wikipedia.org/wiki/Symbolic_link

Możesz użyć innej firmy importerdo dostosowania @importsemantyki.

node-sass-import-once , który działa z node-sass (dla Node.js) może wbudować import plików CSS.

Przykład bezpośredniego użycia:

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

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

Przykład konfiguracji grunt-sass :

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 węzeł-sass-import-once nie może obecnie importować częściowych elementów Sass bez wyraźnego wiodącego podkreślenia. Na przykład z plikiem partials/_partial.scss:

• @import partials/_partial.scss udaje się
• @import * partials/partial.scss zawodzi

Ogólnie należy pamiętać, że niestandardowy importer może zmienić dowolną semantykę importu. Przeczytaj dokumenty, zanim zaczniesz ich używać.

Jeśli mam rację, css jest kompatybilny z scss, więc możesz zmienić rozszerzenie css na scss i powinno ono nadal działać. Po zmianie rozszerzenia możesz je zaimportować, a zostanie ono uwzględnione w pliku.

Jeśli tego nie zrobisz, sass użyje css @import, czego nie chcesz.

Wymyśliłem elegancki, podobny do Railsów sposób na zrobienie tego. Najpierw zmień nazwę .scsspliku na .scss.erb, a następnie użyj następującej składni (przykład zasobu CSS highlight_js-rails4 gem ):

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

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

Wykonywanie @importw SCSS działa dobrze dla plików CSS, o ile jednoznacznie używasz pełnej ścieżki w taki czy inny sposób. W trybie programowania rails sobsługuje zasoby bez ich kompilowania, 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 stronę i „wyświetlisz źródło”, a następnie klikniesz link do arkusza stylów z powyższym @import, zobaczysz tam linię, która wygląda następująco:

@import url(highlight_js/github.css);

Silnik SCSS przekłada się "highlight_js/github.css"na url(highlight_js/github.css). Będzie to działało płynnie, dopóki nie zdecydujesz się spróbować uruchomić go w środowisku produkcyjnym, w którym zasoby są wstępnie skompilowane, a do nazwy pliku wstawiony jest skrót. Plik SCSS nadal będzie przekształcony w plik statyczny, /assets/highlight_js/github.cssktóry nie został wstępnie skompilowany i nie istnieje w środowisku produkcyjnym.

Jak działa to rozwiązanie:

Po pierwsze, przenosząc .scssplik do .scss.erb, skutecznie zmieniliśmy SCSS w szablon dla Railsów. Teraz, ilekroć używamy <%= ... %>tagów szablonów, procesor szablonów Railsów zamieni te fragmenty kodem wyjściowym kodu (tak jak każdy inny szablon).

Podanie asset_path("highlight_js/github")w .scss.erbpliku ma dwie rzeczy:

1. Uruchamia rake assets:precompilezadanie, 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 analizuje pliku CSS; to tylko hosting linku do niego! Więc nie ma łatek małp hokey ani rażących obejść. Obsługujemy zasób CSS za pośrednictwem SCSS zgodnie z przeznaczeniem i używamy adresu URL do wspomnianego zasobu CSS zgodnie z przeznaczeniem Railsów. Słodkie!

Proste obejście:

Cały lub prawie cały plik css można również interpretować tak, jakby to był scss. Umożliwia także importowanie ich do bloku. Zmień nazwę css na scss i zaimportuj go.

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

Najpierw kopiuję plik .css do pliku tymczasowego, tym razem z rozszerzeniem .scss. Przykład konfiguracji Grunt:

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

Następnie możesz zaimportować plik .scss z nadrzędnego scss (w moim przykładzie jest nawet importowany do bloku):

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

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

Jest to teraz możliwe przy użyciu:

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

Mogę potwierdzić, że 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

Podziękowania dla Chriss Epstein: https://github.com/sass/sass/issues/193

Prosty.

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