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

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

Ответ 1

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

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

Ответ 2

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

Я просто хочу отметить, что в декабре 2014 года эта проблема была решена. Теперь можно импортировать файлы css непосредственно в ваш sass файл. Следующий , без расширения после имени файла. Это будет импортировать ваш файл напрямую. Если вы добавите *.css в конец, он перейдет в правило css @import url(...).

Если вы используете некоторые из "причудливых" новых модулей, таких как webpack, и вам, вероятно, понадобится использовать ~ в начале пути. Итак, если вы хотите импортировать следующий путь node_modules/bootstrap/src/core.scss, вы должны написать что-то вроде @import "~bootstrap/src/core".

ПРИМЕЧАНИЕ.
Кажется, это не работает для всех. Если ваш интерпретатор основан на libsass, он должен работать нормально (checkout this). Я тестировал с помощью @import на node -sass, и он работал нормально. К сожалению, это работает и не работает на некоторых экземплярах ruby.

Ответ 3

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

@import "yourfile";

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

Ответ 4

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

Чтобы сократить длинную историю, синтаксис в следующем:

для импорта (включая) необработанный CSS файл
синтаксис без расширения .css в конце (результаты фактического чтения частичного и include его встроенного SCSS/SASS):
@import "path/to/file";
для импорта CSS файла традиционным способом
традиционный путь, с расширением .css в конце (результаты @import url("path/to/file.css"); в скомпилированном CSS):
@import "path/to/file.css";

И это чертовски хорошо: этот синтаксис элегантный и лаконичный, плюс обратно совместимый! Он отлично работает с libsass и node-sass.

Чтобы избежать дополнительных размышлений в комментариях, это явно написано: Ruby на основе Sass по-прежнему имеет эту функцию unimplemented после 5 лет обсуждения проблема # 193. К моменту написания этого ответа он обещал, что в 4.0 будет простой способ выполнить это.

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

Ответ 5

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

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

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

@import "CSS:library/some_css_file"

Ответ 6

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

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

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

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

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

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

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

Ответ 7

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

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 не работает

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

Ответ 8

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

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

Ответ 9

Это реализовано в новых версиях sass с использованием инструкции import:

@import '/public/css/bootstrap.css';

Ответ 10

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

@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 делает две вещи:

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

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

Ответ 11

Простой способ:

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

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

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

Ответ 12

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

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

Ответ 13

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

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

Ответ 14

Simple.

@import "путь/to/file.css";