Есть ли способ импортировать обычный файл CSS с помощью @import
команды Sass ? Хотя я не использую весь синтаксис SCSS из sass, я все еще наслаждаюсь его сочетанием / сжатием функций и хотел бы иметь возможность использовать его без переименования всех моих файлов в * .scss
509
@import
в обычном файле CSS должно просто генерировать обычный CSS @import . Это означает еще один HTTP-запрос, а не объединение или сжатие. Если некоторые реализации ведут себя по-другому, я бы сказал, что это нестандартная функция, которая отличается от языковой спецификации.Ответы:
Похоже, что это не реализовано, на момент написания этой статьи:https://github.com/sass/sass/issues/193Для libsass (реализация C / C ++) импорт работает так
*.css
же, как и для*.scss
файлов - просто опустите расширение:Это будет импортировать
path/to/file.css
.Смотрите этот ответ для более подробной информации.
Смотрите этот ответ для реализации Ruby (sass gem)
источник
@import
Утверждение не изменилось и появляется в результирующем файле CSS, Sass не включает ссылки CSS файл , как @GSto спрашивает. Похоже, это будет реализовано в Sass 3.4 или 4.0libsass
по крайней мере. См. Ответ stackoverflow.com/questions/7111610/… и PR github.com/sass/libsass/pull/754*.css
же, как и для*.css
файлов» - это тавтология. Вы хотели, чтобы один из них был*.scss
, верно?После того, как у меня возникла та же проблема, я запутался со всеми ответами здесь и комментариями по поводу хранилища sass в github.
Я просто хочу отметить, что по состоянию на декабрь 2014 года эта проблема была решена. Теперь можно импортировать
css
файлы прямо в ваш файл sass. Следующий пиар в github решает проблему.Синтаксис такой же, как и сейчас -
@import "your/path/to/the/file"
без расширения после имени файла. Это импортирует ваш файл напрямую. Если вы добавите*.css
в конце, это будет преобразовано вcss
правило@import url(...)
.В случае, если вы используете некоторые из «причудливых» новых пакетов модулей, таких как webpack , вам, вероятно, придется использовать use
~
в начале пути. Итак, если вы хотите импортировать следующий путь,node_modules/bootstrap/src/core.scss
вы должны написать что-то вроде@import "~bootstrap/src/core"
.ПРИМЕЧАНИЕ.
Похоже, это работает не для всех. Если ваш переводчик основан на этом,
libsass
он должен работать нормально (зацените это ). Я тестировал использование@import
на node-sass, и он работает нормально. К сожалению, это работает и не работает на некоторых экземплярах ruby.источник
libsass
но при использовании реализации sass в ruby кажется, что этот синтаксис работает, но только если вам этоsass-css-importer
нужно. По крайней мере, это то, что я вижу. Кто-нибудь еще может это подтвердить?ruby
и с другимиnodejs
. Вы проверили, если вы не ставите расширение после имени файла? Правильный синтаксис@import "path/to/style/file
(без.css
расширения)Error: File to import not found or unreadable: cssdep/cssfile
. Если я создаю,cssdep/cssfile.scss
это внезапно работает. Так что не проблема пути, по какой-то причине я все еще не могу включить файлы '.css' из SASS :(ruby -v
:ruby 2.2.2p95 (2015-04-13 revision 50295) [x64-mingw32]
sass -v
:Sass 3.4.17 (Selective Steve)
Не работает здесь@import "node_modules/normalize.css/normalize";
Вы должны добавить подчеркивание к включаемому файлу CSS и переключить его расширение на scss (например:)
_yourfile.scss
. Тогда вам просто нужно назвать это так:И он будет включать содержимое файла вместо использования стандартной директивы CSS @import.
источник
Это было реализовано и слито начиная с версии
3.2
( тянуть # 754 слиты на 2 января 2015 года наlibsass
вопросы изначально были определены здесь:sass
# 193 # 556 ,libsass
# 318 ).Короче говоря, синтаксис следующий:
импортировать (включать) необработанный CSS-файл
синтаксис без.css
расширения в конце (приводит к фактическому чтению частичногоs[ac]ss|css
и включает его в строку в SCSS / SASS):@import "path/to/file";
импортировать CSS-файл традиционным способом
синтаксис идет традиционным способом, с.css
расширением в конце (приводит к@import url("path/to/file.css");
вашему скомпилированному CSS):@import "path/to/file.css";
И это чертовски хорошо: этот синтаксис элегантен и лаконичен, а также обратно совместим! Отлично работает с
libsass
иnode-sass
.__
Чтобы избежать дальнейших размышлений в комментариях, напишите это явно: Sass на основе Ruby все еще имеет эту функцию, не реализованную после 7 лет обсуждений. К моменту написания этого ответа обещано, что в 4.0 будет простой способ сделать это, вероятно, с помощью . Похоже, что реализация будет очень скоро, новый
«запланированный» тег «Предложение принято» был назначен для проблемы № 556 и новой функции.@use
@use
ответ может быть обновлен, как только что-то изменится .
источник
Node-sass
библиотека Node.js LibSass ( версия Sass на C ) Ни одно упоминание о томlibsass
илиnode-sass
основан рубин, ни одного упоминания о версии RUBY только в оригинальный вопрос. Пожалуйста, прочитайте внимательно, прежде чем писать 3 комментария подряд в следующий раз. У меня есть все ссылки: что касается проблемы # 193, она все еще не реализована после 5 лет обсуждения для версии Ruby, они обещают эту функциональность только тогда, когда вер. 4.0 будет доступно.Хорошие новости всем, Крис Эппштейн создал плагин для компаса с встроенной функцией импорта CSS:
https://github.com/chriseppstein/sass-css-importer
Теперь импортировать файл CSS так же просто, как:
источник
Если у вас есть
.css
файл, который вы не хотите изменять, и не изменяйте его расширение.scss
( например, этот файл относится к разветвленному проекту, который вы не поддерживаете ), вы всегда можете создать символическую ссылку и затем импортировать ее в свою.scss
.Создает символическую ссылку:
Импортирует файл символической ссылки в цель
.scss
:Ваш целевой выходной
.css
файл будет содержать содержимое импортированного.scss
файла символической ссылки , а не правило импорта CSS ( упомянутое @yaz с наибольшим количеством комментариев ). И у вас нет дублированных файлов с различными расширениями, что означает, что любое обновление, сделанное внутри исходного.css
файла, сразу же импортируется в ваш целевой вывод.источник
.css
и созданная символическая ссылка) доступны всем, например, через общий репозиторий.mklink /H <link> <target>
и называется жесткой ссылкой @mrsafraz.Вы можете использовать стороннюю программу
importer
для настройки@import
семантики.node-sass-import-Once , который работает с node-sass (для Node.js) и может импортировать CSS-файлы.
Пример прямого использования:
Пример конфигурации grunt-sass :
Обратите внимание, что node-sass-import-Once в настоящее время не может импортировать партиции Sass без явного начального подчеркивания. Например с файлом
partials/_partial.scss
:@import partials/_partial.scss
преуспевает@import * partials/partial.scss
терпит неудачуВ общем, имейте в виду, что пользовательский импортер может изменить любую семантику импорта. Прочитайте документы, прежде чем начать их использовать.
источник
Если я прав, css совместим с scss, поэтому вы можете изменить расширение css на scss, и оно должно продолжать работать. После изменения расширения вы можете импортировать его, и оно будет включено в файл.
Если вы этого не сделаете, sass будет использовать css @import, который вам не нужен.
источник
Я нашел элегантный Rails-подобный способ сделать это. Сначала переименуйте ваш
.scss
файл в.scss.erb
, затем используйте синтаксис, подобный этому (пример для CSS-ресурса highlight_js-rails4 gem ):Почему вы не можете разместить файл напрямую через SCSS :
Выполнение
@import
операции в SCSS прекрасно работает с файлами CSS, если вы явно используете полный путь тем или иным способом. В режиме разработкиrails s
обслуживает ресурсы без их компиляции, поэтому такой путь работает ...... потому что пройденный путь буквально
/assets/highlight_js/github.css
. Если вы щелкнете правой кнопкой мыши на странице и «просмотрите исходный код», а затем нажмите на ссылку для таблицы стилей с приведенным выше описанием@import
, вы увидите там строку, которая выглядит следующим образом:Двигатель SCSS переводится
"highlight_js/github.css"
какurl(highlight_js/github.css)
. Это будет работать без сбоев, пока вы не решите попробовать запустить его в рабочей среде, где предварительно скомпилированные ресурсы имеют хеш-код, введенный в имя файла. Файл SCSS по-прежнему преобразуется в статический,/assets/highlight_js/github.css
который не был предварительно скомпилирован и не существует в рабочей среде .Как работает это решение:
Во-первых, переместив
.scss
файл в.scss.erb
, мы фактически превратили SCSS в шаблон для Rails. Теперь всякий раз, когда мы используем<%= ... %>
теги шаблонов, процессор шаблонов Rails заменяет эти фрагменты выводом кода (как и любой другой шаблон).Указание
asset_path("highlight_js/github")
в.scss.erb
файле делает две вещи:rake assets:precompile
задачу для прекомпиляции соответствующего файла CSS.Это также означает, что механизм SCSS даже не анализирует файл CSS; это просто размещение ссылки на него! Так что нет никаких патчей обезьяны или грубых обходных путей. Мы обслуживаем актив CSS через SCSS, как предполагалось, и используем URL для указанного актива CSS, как и предполагалось Rails. Сладкий!
источник
Простой обходной путь:
Весь или почти весь файл CSS также может быть интерпретирован так, как если бы это был файл scss. Это также позволяет импортировать их внутри блока. Переименуйте css в scss и импортируйте его так.
В моей реальной конфигурации я делаю следующее:
Сначала я копирую файл .css во временный, на этот раз с расширением .scss. Пример конфигурации Grunt:
Затем вы можете импортировать файл .scss из родительского scss (в моем примере он даже импортируется в блок):
Примечание: это может быть опасно, потому что это эффективно приведет к тому, что CSS будет проанализирован несколько раз. Проверьте исходный css на наличие в нем артефактов, интерпретируемых scss (это маловероятно, но если это произойдет, результат будет трудно отладить и опасен).
источник
Теперь это возможно с помощью:
источник
sass-css-importer
установлен gem , sass вызывается с ключом-r sass-css-importer
и.css
неЯ могу подтвердить это работает:
Благодарим Крисса Эпштейна: https://github.com/sass/sass/issues/193
источник
Просто.
@import "path / to / file.css";
источник