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

Question

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

Answer 1

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

Я просто хочу отметить, что по состоянию на декабрь 2014 года эта проблема была решена. Теперь можно импортировать css файлы прямо в ваш файл sass. Следующая PR в github решает проблему.

Синтаксис такой же, как сейчас - @import "your/path/to/the/file", без расширения после имени файла. Это импортирует ваш файл напрямую. Если вы добавите *.css в конце, оно будет преобразовано в css rule @import url(...).

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

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

Answer 2

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

@import "yourfile";

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

Answer 3

Это было реализовано и объединено, начиная с версии 3.2 ( pull # 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.

__

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

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

Answer 4

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

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

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

@import "path/to/file";

Это импортирует path/to/file.css.

Подробнее см. в этом ответе .

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

Answer 5

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

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

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

@import "CSS:library/some_css_file"

Answer 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 будет содержать содержимое импортированного файла символической ссылки .scss, а не правила импорта CSS ( упомянуто @yaz с наибольшим количеством комментариев ).И у вас нет дублированных файлов с разными расширениями, что означает, что любое обновление, сделанное внутри исходного .css файла, сразу же импортируется в ваш целевой вывод.специальный тип файла, который содержит ссылку на другой файл в форме абсолютного или относительного пути и который влияет на разрешение имени пути.- http://en.wikipedia.org/wiki/Symbolic_link

Answer 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"
      }
    }
  });

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

• @import partials/_partial.scss успешно
• @import * partials/partial.scss не удается

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

Answer 8

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

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

Answer 9

Я нашел элегантный, подобный 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. Классно!

Answer 10

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

@ url для импорта ('yourStyle.css')