Czy można zaimportować zwykły plik CSS za pomocą @import
polecenia 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
508
@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.Odpowiedzi:
Wygląda na to, że nie jest to zaimplementowane w momencie pisania tego tekstu:https://github.com/sass/sass/issues/193W przypadku libsass (implementacja C / C ++) import działa
*.css
tak samo jak w przypadku*.scss
plików - po prostu pomiń rozszerzenie:Spowoduje to zaimportowanie
path/to/file.css
.Zobacz tę odpowiedź, aby uzyskać więcej informacji.
Zobacz tę odpowiedź dotyczącą implementacji Ruby (klejnot sass)
źródło
@import
Oś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.0libsass
co najmniej. Zobacz odpowiedź stackoverflow.com/questions/7111610/... i PR github.com/sass/libsass/pull/754*.css
tak samo jak dla*.css
plików” to tautologia. Chciałeś, żeby jeden z nich był*.scss
, prawda?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ć
css
pliki 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*.css
na końcu, przełoży się to nacss
regułę@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
libsass
nim, powinien działać dobrze (sprawdź to ). Testowałem przy użyciu@import
sass węzłów i działa dobrze. Niestety działa to i nie działa w niektórych instancjach ruby.źródło
libsass
ale kiedy używa się ruby sass, wydaje się, że ta składnia działa, ale tylko jeśli jest tosass-css-importer
wymagane. Przynajmniej to widzę. Czy ktoś inny może to potwierdzić?ruby
inodejs
tłumaczami. Czy sprawdziłeś, czy nie umieszczasz rozszerzenia po nazwie pliku? Prawidłowa składnia to@import "path/to/style/file
(bez.css
rozszerzenia)Error: File to import not found or unreadable: cssdep/cssfile
. Jeśli utworzę,cssdep/cssfile.scss
to 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 :(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@import "node_modules/normalize.css/normalize";
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ć:I będzie zawierać zawartość pliku, zamiast używać standardowej dyrektywy CSS @import.
źródło
Zostało to zrealizowane i scalone od wersji
3.2
( przyciąganie # 754 połączyły się 2 stycznia 2015 olibsass
kwestie oryginalnie zostały zdefiniowane tutaj:sass
# 193 # 556 ,libsass
# 318 ).Krótko mówiąc, składnia w następnym:
aby zaimportować (dołączyć) nieprzetworzony plik CSS
składnia nie.css
ma rozszerzenia na końcu (powoduje faktyczne odczytanie częściowegos[ac]ss|css
i dołączenie go do SCSS / SASS):@import "path/to/file";
aby zaimportować plik CSS w tradycyjny sposób
składnia przebiega w tradycyjny sposób, z.css
rozszerzeniem 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
libsass
inode-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 .
źródło
Node-sass
to biblioteka Node.js LibSass ( wersja C Sass). Ani jedna wzmianka, żelibsass
albonode-sass
jest 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.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:
źródło
Jeśli masz
.css
plik, 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:
Importuje plik dowiązania symbolicznego do celu
.scss
:Docelowy
.css
plik wyjściowy będzie przechowywał zawartość importowanego.scss
pliku 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.css
pliku początkowym jest natychmiast importowana do pliku docelowego.źródło
.css
i utworzone dowiązanie symboliczne) są dostępne dla wszystkich za pośrednictwem na przykład wspólnego repozytorium.mklink /H <link> <target>
i nazywa się hard link @mrsafraz.Możesz użyć innej firmy
importer
do dostosowania@import
semantyki.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:
Przykład konfiguracji grunt-sass :
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
zawodziOgólnie należy pamiętać, że niestandardowy importer może zmienić dowolną semantykę importu. Przeczytaj dokumenty, zanim zaczniesz ich używać.
źródło
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.
źródło
Wymyśliłem elegancki, podobny do Railsów sposób na zrobienie tego. Najpierw zmień nazwę
.scss
pliku na.scss.erb
, a następnie użyj następującej składni (przykład zasobu CSS highlight_js-rails4 gem ):Dlaczego nie możesz hostować pliku bezpośrednio przez SCSS :
Wykonywanie
@import
w 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 programowaniarails s
obsługuje zasoby bez ich kompilowania, więc ścieżka taka jak ta działa ...... 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:Silnik SCSS przekłada się
"highlight_js/github.css"
naurl(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.css
który nie został wstępnie skompilowany i nie istnieje w środowisku produkcyjnym.Jak działa to rozwiązanie:
Po pierwsze, przenosząc
.scss
plik 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.erb
pliku ma dwie rzeczy:rake assets:precompile
zadanie, aby wstępnie skompilować odpowiedni plik CSS.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!
źródło
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:
Następnie możesz zaimportować plik .scss z nadrzędnego scss (w moim przykładzie jest nawet importowany do bloku):
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).
źródło
Jest to teraz możliwe przy użyciu:
źródło
sass-css-importer
jest zainstalowany, sass jest wywoływany z przełącznikiem-r sass-css-importer
i.css
jest pomijany w ścieżce plikuMogę potwierdzić, że działa:
Podziękowania dla Chriss Epstein: https://github.com/sass/sass/issues/193
źródło
Prosty.
@import "path / to / file.css";
źródło