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

после того, как у меня была та же проблема, я запутался со всеми ответами здесь и комментариями над репозиторием sass в github.

я просто хочу отметить, что в декабре 2014 года, этот вопрос был решен. Теперь можно импортировать css файлы непосредственно в файл sass. Следующее PR в 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 на узле-sass, и он работает нормально. К сожалению, это работает и не работает на некоторых экземплярах ruby.

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

@import "yourfile";

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

это было реализовано и объединено начиная с версии 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.

__

чтобы избежать дальнейших спекуляций в комментариях, напишите это явно:Рубин на основе Сасс все еще имеет эту функцию невыполненными после 7 лет дискуссий. К моменту написания этого ответа обещано, что в 4.0 будет простой способ выполнить это, вероятно, с помощью @use. Кажется там будет реализация очень скоро, Новый "запланировано" тег "предложение принято" был назначен для выпуск #556 и новая @use характеристика.

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

хорошие новости все, Крис Eppstein создал плагин compass с встроенной функцией импорта css:

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

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

@import "CSS:library/some_css_file"

если у вас .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 с самыми высокими голосами комментариев). И у вас нет дублированных файлов с разными расширениями, что означает любое обновление, сделанное внутри initial .css файл немедленно импортируется в целевой вывод.

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

вы можете использовать стороннюю importer настроить @import семантика.

node-sass-import-once С узел-sass (для узла.js) может встроенный импорт CSS-файлов.

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

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

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

пример грунт-Сасс конфигурация:

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 не

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

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

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

я придумал элегантный, Рельсоподобный способ сделать это. Во-первых, переименуйте свой до .scss.erb, затем используйте такой синтаксис (пример для highlight_js-rails4 gem CSS актив):

@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" to url(highlight_js/github.css). Это будет работать плавно, пока вы не решите попробовать запустить его в производстве, где предварительно скомпилированные активы имеют хэш, введенный в файл имя. Файл SCSS по-прежнему будет разрешаться статическим /assets/highlight_js/github.css это не было предварительно скомпилировано и не существует в производстве.

как это решение работает:

во-первых, перемещая до .scss.erb, мы эффективно превратили SCSS в шаблон для Rails. Теперь, когда мы используем <%= ... %> template tags, обработчик шаблонов Rails заменит эти фрагменты выводом кода (как и любой другой шаблон.)

о том,asset_path("highlight_js/github") на .scss.erb файл делает две вещи:

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

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

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

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

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

сначала я копирую .CSS-файл во временный, на этот раз с .расширение СКС. Пример конфигурации 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-интерпретируемый артефакт (это маловероятно, но если это произойдет, результат будет трудно отлаживать и опасно).

на sass 3.5.5 это работает

@import url ('yourStyle.css')

теперь можно использовать:

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

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

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

простой.

@import "путь / в / файл.css";