Импортировать обычный файл CSS в файл SCSS?

509

Есть ли способ импортировать обычный файл CSS с помощью @importкоманды Sass ? Хотя я не использую весь синтаксис SCSS из sass, я все еще наслаждаюсь его сочетанием / сжатием функций и хотел бы иметь возможность использовать его без переименования всех моих файлов в * .scss

GSto
источник
1
Да, есть способ: просто удалите расширение '.css' в пути к файлу css в операторе @input :) (работает для версии sass> = 3.2)
Камиль Килчевски,
Начиная с 2018 года использование SASS@import в обычном файле CSS должно просто генерировать обычный CSS @import . Это означает еще один HTTP-запрос, а не объединение или сжатие. Если некоторые реализации ведут себя по-другому, я бы сказал, что это нестандартная функция, которая отличается от языковой спецификации.
Альваро Гонсалес

Ответы:

215

Похоже, что это не реализовано, на момент написания этой статьи:

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

Для libsass (реализация C / C ++) импорт работает так *.cssже, как и для *.scssфайлов - просто опустите расширение:

@import "path/to/file";

Это будет импортировать path/to/file.css.

Смотрите этот ответ для более подробной информации.

Смотрите этот ответ для реализации Ruby (sass gem)

Стивен Фури
источник
23
@kleinfreund не соответствует Sass 3.3.1. @importУтверждение не изменилось и появляется в результирующем файле CSS, Sass не включает ссылки CSS файл , как @GSto спрашивает. Похоже, это будет реализовано в Sass 3.4 или 4.0
fregante
1
Если вы используете Gulp или Grunt, просто используйте другой инструмент для импорта ваших CSS-файлов, это проще и работает сейчас . Я использую gulp-import-css , я не уверен, что такое эквивалент Grunt.
Фреганте
3
Это работает libsassпо крайней мере. См. Ответ stackoverflow.com/questions/7111610/… и PR github.com/sass/libsass/pull/754
4
«Импорт работает так *.cssже, как и для *.cssфайлов» - это тавтология. Вы хотели, чтобы один из них был *.scss, верно?
underscore_d
1
Начиная с версии 3.5.3, libsass предупреждает, что это нестандартное поведение и на него нельзя полагаться. (Вместо «Использовать пользовательский импорт , чтобы сохранить это поведение.») Github.com/sass/libsass/releases/tag/3.5.3
ix3
383

После того, как у меня возникла та же проблема, я запутался со всеми ответами здесь и комментариями по поводу хранилища 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.

tftd
источник
1
Кажется, это реализовано, libsassно при использовании реализации sass в ruby ​​кажется, что этот синтаксис работает, но только если вам это sass-css-importerнужно. По крайней мере, это то, что я вижу. Кто-нибудь еще может это подтвердить?
Бсара
5
Вы уверены, что у вас последняя версия Sass? Я использовал этот синтаксис некоторое время, и он прекрасно работает как с интерпретаторами, так rubyи с другими nodejs. Вы проверили, если вы не ставите расширение после имени файла? Правильный синтаксис @import "path/to/style/file(без .cssрасширения)
tftd
4
Я использую ruby ​​sass v3.4.18 (с Jekyll) в соответствии с моим Gemfile.lock. Все еще вижу Error: File to import not found or unreadable: cssdep/cssfile. Если я создаю, cssdep/cssfile.scssэто внезапно работает. Так что не проблема пути, по какой-то причине я все еще не могу включить файлы '.css' из 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)Не работает здесь
Кирилл Chapon
5
Спасибо тебе за это! Я смог импортировать normalize.css, используя node-sass с:@import "node_modules/normalize.css/normalize";
Nick
260

Вы должны добавить подчеркивание к включаемому файлу CSS и переключить его расширение на scss (например:) _yourfile.scss. Тогда вам просто нужно назвать это так:

@import "yourfile";

И он будет включать содержимое файла вместо использования стандартной директивы CSS @import.

Дэвид Моралес
источник
1
Это может быть что-то о конвенции и стандартах.
Дэвид Моралес
70
Подчеркивание состоит в том, чтобы предотвратить его компиляцию в виде отдельного файла.
Иона
4
В случае, если кому-то интересно, это работает, потому что синтаксис Sass SSS - это расширенный набор CSS3. Вот почему нужна точка с запятой.
Джейкоб Ван
46
Например, вы не можете изменить расширение CSS-файла какого-либо поставщика.
Слава Фомин II
7
Если это на вашем компьютере / сервере, вы можете! И есть также символические ссылки, если вы не хотите.
Ste
260

Это было реализовано и слито начиная с версии 3.2( тянуть # 754 слиты на 2 января 2015 года на libsassвопросы изначально были определены здесь: sass# 193 # 556 , libsass# 318 ).

Короче говоря, синтаксис следующий:

  1. импортировать (включать) необработанный CSS-файл

    синтаксис без.css расширения в конце (приводит к фактическому чтению частичного s[ac]ss|cssи включает его в строку в SCSS / SASS):

    @import "path/to/file";

  2. импортировать 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

ответ может быть обновлен, как только что-то изменится .

Дальняя сторона
источник
3
просто чтобы уточнить, импорт css как sass работал для меня так: @import url ("путь / к / файлу без-css-extension");
Крейг Уэйн,
1
На самом деле это не работает в основанной на ruby ​​версии sass. Например, команда: sass myFile.scss: output.css завершается неудачно с импортом css, но работает, когда вы изменяете расширение файла .css на .scss. Запустите с последней версией на момент написания этого комментария: 3.4.22 / Селективный Стив. Это также влияет на любых исполнителей задач, использующих версию ruby, например, grunt-contrib-sass.
ansorensen
@ansorensen, я думаю, что с твоей стороны есть путаница. Что вы подразумеваете под "работает, когда вы меняете расширение файла .css на .scss" ? Вся идея была именно о обычных файлах CSS и двух способах работы с ними (не путайте с импортом SCSS). Пожалуйста, прочитайте еще раз вопрос и ответ.
Farside
@ Farside Нет путаницы. Синтаксис импорта path / to / file не работает в последней версии sass gem в Ruby. Когда я запускаю sass с импортом, импорт успешно работает, когда файл по импортированному пути имеет расширение .scss, и завершается ошибкой, когда файл имеет .css. Вопрос требует импорта css в scss, и вы предоставляете ответ для lib-sass & node-sass. Я комментирую, что эта функциональность отсутствует в версиях sass для Ruby.
ansorensen
1
@ansorensen, боже мой, так много текста от тебя ... Я был откровенен и никого не путаю. Node-sassбиблиотека Node.js LibSass ( версия Sass на C ) Ни одно упоминание о том libsassили node-sassоснован рубин, ни одного упоминания о версии RUBY только в оригинальный вопрос. Пожалуйста, прочитайте внимательно, прежде чем писать 3 комментария подряд в следующий раз. У меня есть все ссылки: что касается проблемы # 193, она все еще не реализована после 5 лет обсуждения для версии Ruby, они обещают эту функциональность только тогда, когда вер. 4.0 будет доступно.
Farside
37

Хорошие новости всем, Крис Эппштейн создал плагин для компаса с встроенной функцией импорта CSS:

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

Теперь импортировать файл CSS так же просто, как:

@import "CSS:library/some_css_file"
Рафал Пастушак
источник
3
Сбой из-за использования устаревшей начальной точки. «Да, но никогда не может быть ...» Я уверен, что это было здорово, когда он появился впервые, но для его работы требуется обновление, иначе вы должны установить устаревшие плагины. Спасибо, C§
CSS
18

Если у вас есть .cssфайл, который вы не хотите изменять, и не изменяйте его расширение .scss( например, этот файл относится к разветвленному проекту, который вы не поддерживаете ), вы всегда можете создать символическую ссылку и затем импортировать ее в свою .scss.

Создает символическую ссылку:

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


Импортирует файл символической ссылки в цель .scss:

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


Ваш целевой выходной .cssфайл будет содержать содержимое импортированного .scssфайла символической ссылки , а не правило импорта CSS ( упомянутое @yaz с наибольшим количеством комментариев ). И у вас нет дублированных файлов с различными расширениями, что означает, что любое обновление, сделанное внутри исходного .cssфайла, сразу же импортируется в ваш целевой вывод.

Символьная ссылка (также символическая или программная ссылка) - это специальный тип файла, который содержит ссылку на другой файл в форме абсолютного или относительного пути и влияет на разрешение пути.
- http://en.wikipedia.org/wiki/Symbolic_link

Ник Сумейко
источник
9
Добавление символической ссылки - не очень портативное решение (т.е. несколько разработчиков или
сборочных
@LocalPCGuy это так, когда оба файла ( .cssи созданная символическая ссылка) доступны всем, например, через общий репозиторий.
Ник Сумейко
Я только что сделал это и собирался ответить о ссылках sym в этой теме, но рад, что это уже здесь! Это правда, что такая необходимость встречается редко, но моя ситуация заключалась в том, что я вообще не хотел изменять файл CSS (потому что это был файл bower), поэтому создавал символическую ссылку и импортировал, которая работала отлично.
Аарон Краусс
2
Для пользователей Windows та же функциональность будет иметь другой синтаксис mklink /H <link> <target>и называется жесткой ссылкой @mrsafraz.
Farside
5

Вы можете использовать стороннюю программу importerдля настройки @importсемантики.

node-sass-import-Once , который работает с node-sass (для Node.js) и может импортировать CSS-файлы.

Пример прямого использования:

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

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

Пример конфигурации 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"
      }
    }
  });

Обратите внимание, что node-sass-import-Once в настоящее время не может импортировать партиции Sass без явного начального подчеркивания. Например с файлом partials/_partial.scss:

  • @import partials/_partial.scss преуспевает
  • @import * partials/partial.scss терпит неудачу

В общем, имейте в виду, что пользовательский импортер может изменить любую семантику импорта. Прочитайте документы, прежде чем начать их использовать.

joews
источник
4

Если я прав, css совместим с scss, поэтому вы можете изменить расширение css на scss, и оно должно продолжать работать. После изменения расширения вы можете импортировать его, и оно будет включено в файл.

Если вы этого не сделаете, sass будет использовать css @import, который вам не нужен.

Pickels
источник
16
К сожалению, иногда импортированные CSS-файлы находятся вне вашего контроля, как в библиотеке, которая упаковывает некоторые статические ресурсы.
Эрик Дрехсель
2

Я нашел элегантный Rails-подобный способ сделать это. Сначала переименуйте ваш .scssфайл в .scss.erb, затем используйте синтаксис, подобный этому (пример для CSS-ресурса highlight_js-rails4 gem ):

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

Почему вы не можете разместить файл напрямую через SCSS :

Выполнение @importоперации в SCSS прекрасно работает с файлами CSS, если вы явно используете полный путь тем или иным способом. В режиме разработки rails sобслуживает ресурсы без их компиляции, поэтому такой путь работает ...

@import "highlight_js/github.css";

... потому что пройденный путь буквально /assets/highlight_js/github.css. Если вы щелкнете правой кнопкой мыши на странице и «просмотрите исходный код», а затем нажмите на ссылку для таблицы стилей с приведенным выше описанием @import, вы увидите там строку, которая выглядит следующим образом:

@import url(highlight_js/github.css);

Двигатель 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файле делает две вещи:

  1. Запускает rake assets:precompileзадачу для прекомпиляции соответствующего файла CSS.
  2. Создает URL, который надлежащим образом отражает актив независимо от среды Rails.

Это также означает, что механизм SCSS даже не анализирует файл CSS; это просто размещение ссылки на него! Так что нет никаких патчей обезьяны или грубых обходных путей. Мы обслуживаем актив CSS через SCSS, как предполагалось, и используем URL для указанного актива CSS, как и предполагалось Rails. Сладкий!

Synthead
источник
Мне решение кажется немного сомнительным и больше похоже на взлом. Но это хорошая работа по расследованию!
Farside
0

Простой обходной путь:

Весь или почти весь файл CSS также может быть интерпретирован так, как если бы это был файл scss. Это также позволяет импортировать их внутри блока. Переименуйте css в scss и импортируйте его так.

В моей реальной конфигурации я делаю следующее:

Сначала я копирую файл .css во временный, на этот раз с расширением .scss. Пример конфигурации Grunt:

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

Затем вы можете импортировать файл .scss из родительского scss (в моем примере он даже импортируется в блок):

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

Примечание: это может быть опасно, потому что это эффективно приведет к тому, что CSS будет проанализирован несколько раз. Проверьте исходный css на наличие в нем артефактов, интерпретируемых scss (это маловероятно, но если это произойдет, результат будет трудно отладить и опасен).

Петер - Восстановить Монику
источник
-3

Теперь это возможно с помощью:

@import 'CSS:directory/filename.css';
Шломи Шварц
источник
3
только если sass-css-importerустановлен gem , sass вызывается с ключом -r sass-css-importerи .cssне
указывается в
-4

Я могу подтвердить это работает:

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

Благодарим Крисса Эпштейна: https://github.com/sass/sass/issues/193

Macario
источник
1
Как вы можете использовать это в вашем файле scss?
Адриан Бер
-10

Просто.

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

Адам Стаковяк
источник
6
Я пробовал это, но он не будет тянуть содержимое файла в этот при сжатии, он просто сохранит строку @import.
GSto
1
Самый низкий ответ, но по иронии судьбы, сейчас это кажется правильным. Включение суффикса - правильная вещь.
Вик