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

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

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

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

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

@import "path/to/file";

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

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

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

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

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

@import "yourfile";

И он будет включать содержимое файла вместо использования стандартной директивы CSS @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.

__

Чтобы избежать дальнейших размышлений в комментариях, напишите это явно: Sass на основе Ruby все еще имеет эту функцию, не реализованную после 7 лет обсуждений. К моменту написания этого ответа обещано, что в 4.0 будет простой способ сделать это, вероятно, с помощью . Похоже, что реализация будет очень скоро, новый «запланированный » тег «Предложение принято» был назначен для проблемы № 556 и новой функции.@use@use

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

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

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

Вы можете использовать стороннюю программу 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 терпит неудачу

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

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

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

Я нашел элегантный 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. Сладкий!

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

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

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

@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 "path / to / file.css";