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

Question

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

Answer 1

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

Весь или почти весь файл 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 (это маловероятно, но если это произойдет, результат будет трудно отладить и опасен).

Answer 2

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

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

Answer 3

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

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

Answer 4

Простой.

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