Zaimportować zwykły plik CSS do pliku SCSS?

508

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

GSto
źródło
1
Tak, jest sposób: wystarczy usunąć rozszerzenie „.css” ze ścieżki pliku css w instrukcji @input :) (działa dla wersji sass> = 3.2)
Kamil Kiełczewski
Od 2018 r. Użycie SASS@import w zwykłym pliku CSS powinno po prostu wygenerować zwykły CSS @import . Oznacza to jeszcze jedno żądanie HTTP i brak łączenia ani kompresji. Jeśli niektóre implementacje zachowują się inaczej, powiedziałbym, że jest to niestandardowa funkcja, która odbiega od specyfikacji języka.
Álvaro González

Odpowiedzi:

215

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)

Stephen Fuhry
źródło
23
@kleinfreund nieprawda z Sass 3.3.1. @importOświadczenie nie zmienia w ogóle i pojawia się w wynikowym pliku CSS Sass nie zawiera odwołanie plik CSS jak @GSto prosi. Wygląda na to, że zostanie zaimplementowany w Sass 3.4 lub 4.0
fregante
1
Jeśli używasz Gulp lub Grunt, po prostu użyj innego narzędzia do importowania plików CSS, jest to łatwiejsze i działa teraz . Używam gulp-import-css , nie jestem pewien, jaki jest odpowiednik Grunt.
fregante
3
Działa z libsassco najmniej. Zobacz odpowiedź stackoverflow.com/questions/7111610/... i PR github.com/sass/libsass/pull/754
2016
„Import działa *.csstak samo jak dla *.cssplików” to tautologia. Chciałeś, żeby jeden z nich był *.scss, prawda?
underscore_d
1
Począwszy od wersji 3.3.3, libsass ostrzega, że ​​jest to zachowanie niestandardowe i nie należy na nim polegać. (Zamiast tego „Użyj niestandardowego importera, aby zachować to zachowanie.”) Github.com/sass/libsass/releases/tag/3.5.3
iX3
383

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.

tftd
źródło
1
Wydaje się, że jest to zaimplementowane, libsassale kiedy używa się ruby ​​sass, wydaje się, że ta składnia działa, ale tylko jeśli jest to sass-css-importerwymagane. Przynajmniej to widzę. Czy ktoś inny może to potwierdzić?
bsara
5
Czy na pewno masz najnowszą wersję sass? Używam tej składni od jakiegoś czasu i działa ona dobrze zarówno z tłumaczami, jak rubyi nodejstłumaczami. Czy sprawdziłeś, czy nie umieszczasz rozszerzenia po nazwie pliku? Prawidłowa składnia to @import "path/to/style/file(bez .cssrozszerzenia)
tftd
4
Używam ruby ​​sass v3.4.18 (z Jekyll) zgodnie z moim Gemfile.lock. Nadal widzę Error: File to import not found or unreadable: cssdep/cssfile. Jeśli utworzę, cssdep/cssfile.scssto nagle działa. Więc nie jest to problem ze ścieżką, z jakiegoś powodu nadal nie mogę dołączyć plików „.css” z SASS :(
thom_nic
1
ruby -v: ruby 2.2.2p95 (2015-04-13 revision 50295) [x64-mingw32] sass -v: Sass 3.4.17 (Selective Steve)Nie działa tutaj
Cyril CHAPON
5
Dziękuję Ci za to! Byłem w stanie zaimportować normalize.css przy użyciu node-sass z@import "node_modules/normalize.css/normalize";
Nick
260

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.

David Morales
źródło
1
Może to coś o konwencji i standardach.
David Morales,
70
Podkreślenie ma zapobiec kompilacji go jako osobnego pliku.
Jonasz
4
Jeśli ktoś się zastanawia, działa to, ponieważ składnia SCSS Sassa jest nadzbiorem CSS3. Dlatego też potrzebny jest średnik.
Jacob Wan
46
Nie można na przykład zmienić rozszerzenia niektórych plików CSS dostawców.
Slava Fomin II
7
Jeśli jest na twoim komputerze / serwerze, możesz! Istnieją również dowiązania symboliczne, jeśli nie chcesz.
ste
260

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 .

Daleko z boku
źródło
3
dla wyjaśnienia, importowanie css jako sass działało w ten sposób dla mnie: @import url ("ścieżka / do / pliku-bez-rozszerzenia css");
Craig Wayne
1
To nie działa w wersji sass opartej na Ruby. Na przykład polecenie: sass myFile.scss: output.css kończy się niepowodzeniem w przypadku importu css, ale działa po zmianie rozszerzenia pliku .css na .scss. Uruchom najnowszą wersję w momencie pisania tego komentarza: 3.4.22 / Selective Steve. Wpływa to również na wszystkich wykonawców zadań korzystających z wersji ruby, takich jak pomruk-contrib-sass.
ansorensen
@ansorensen, myślę, że z twojej strony jest zamieszanie. Co rozumiesz przez „działa, gdy zmienisz rozszerzenie pliku .css na .scss” ? Cały pomysł dotyczył dokładnie zwykłych plików CSS i dwóch sposobów pracy z nimi (nie mylić z importowaniem SCSS). Przeczytaj jeszcze raz pytanie i odpowiedź.
Farside
@Farside Bez zamieszania. Składnia importu „path / to / file” nie działa w najnowszej wersji klejnotu sass w Ruby. Kiedy uruchamiam sass z importem, import działa pomyślnie, gdy plik na importowanej ścieżce ma rozszerzenie .scss i kończy się niepowodzeniem, gdy plik ma .css. Pytanie dotyczy importu css do scss, a ty podajesz odpowiedź dla lib-sass i node-sass. Komentuję, że tej funkcji nie ma w wersjach sass opartych na Ruby.
ansorensen
1
@ansorensen, omg, tyle wiadomości od ciebie ... Mówiłem wprost i nikogo nie mylę. Node-sassto biblioteka Node.js LibSass ( wersja C Sass). Ani jedna wzmianka, że libsassalbo node-sassjest oparta Ruby, ani jedna wzmianka o wersji RUBY tylko w oryginalnym pytanie. Przeczytaj uważnie, zanim następnym razem napiszesz 3 komentarze z rzędu. Mam wszystkie referencje: zgodnie z numerem 193 nie został jeszcze wdrożony po 5 latach dyskusji na temat wersji Ruby, obiecują tę funkcjonalność tylko w wersji ver. 4.0 będzie dostępny.
Farside
37

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"
Rafał Pastuszak
źródło
3
Nie działa z powodu użycia przestarzałego punktu początkowego. „Co to jest, ale nigdy nie może być…” Jestem pewien, że było świetne, kiedy po raz pierwszy się ukazało, ale potrzebuje aktualizacji, aby znów działać, lub musisz zainstalować przestarzałe wtyczki. Dzięki, C§
CSS,
18

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

Nik Sumeiko
źródło
9
Dodanie dowiązania symbolicznego nie jest bardzo przenośnym rozwiązaniem (tj. Wielu programistów lub kompilacja systemów)
LocalPCGuy
@LocalPCGuy, gdy oba pliki ( .cssi utworzone dowiązanie symboliczne) są dostępne dla wszystkich za pośrednictwem na przykład wspólnego repozytorium.
Nik Sumeiko,
Właśnie to zrobiłem i zamierzałem odpowiedzieć na temat linków sym w tym wątku, ale cieszę się, że już tu jest! To prawda, że ​​ta potrzeba jest rzadka, ale moja sytuacja polegała na tym, że wcale nie chciałem modyfikować pliku CSS (ponieważ był to plik altany), więc zbudowanie dowiązania symbolicznego i importowanie działało idealnie.
Aaron Krauss,
2
Dla użytkowników systemu Windows ta sama funkcjonalność miałaby inną składnię mklink /H <link> <target>i nazywa się hard link @mrsafraz.
Farside
5

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

joews
źródło
4

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.

Pikle
źródło
16
niestety czasami importowane pliki css są poza twoją kontrolą, tak jak w bibliotece, która pakuje niektóre zasoby statyczne.
Eric Drechsel
2

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!

Synthead
źródło
Dla mnie rozwiązanie wydaje się nieco podejrzane i brzmi bardziej jak hack. Ale to dobra robota w sprawie dochodzenia!
Farside
0

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

peterh - Przywróć Monikę
źródło
-3

Jest to teraz możliwe przy użyciu:

@import 'CSS:directory/filename.css';
Shlomi Schwartz
źródło
3
tylko jeśli gem sass-css-importerjest zainstalowany, sass jest wywoływany z przełącznikiem -r sass-css-importeri .cssjest pomijany w ścieżce pliku
Bernhard Döbler
-4

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

Macario
źródło
1
Jak możesz tego użyć w swoim pliku scss?
Adrian Ber,
-10

Prosty.

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

Adam Stacoviak
źródło
6
Próbowałem tego, ale nie kompresuje zawartości pliku do tego pliku, po prostu zachowuje linię @import.
GSto,
1
Najniższa odpowiedź, ale jak na ironię wydaje się, że teraz jest to właściwa droga. Dołączanie sufiksu jest właściwe.
Wyck