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

Question

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

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

598

sass

Источник

user89761 18 авг '11 в 17:32

17 ответов

Решение

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

449

Источник

user393805 16 май '15 в 18:58

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

Короче говоря, синтаксис следующий:

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

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

__

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

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

293

Источник

user4354249 22 мар '16 в 22:31

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

@import "yourfile";

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

264

Источник

user267705 10 янв '12 в 12:06

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

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

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

@import "CSS:library/some_css_file"

43

Источник

user969813 03 июл '13 в 08:48

Если у тебя есть .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

19

Источник

user309031 17 ноя '14 в 20:01

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

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

6

Источник

user2806996 05 фев '16 в 14:37

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

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

4

Источник

user145117 24 сен '11 в 18:27

Чтобы импортировать файл css в scss, просто используйте это: @import "src/your_file_path"; без использования расширения .css в конце

4

Источник

user17240575 31 июл '22 в 13:02

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

@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. Милая!

2

Источник

user1713534 22 июл '16 в 19:19

Чтобы импортировать обычный файл CSS в Sass:

Официальная документация Sass: импорт CSS в Sass

2

Источник

user16709095 09 ноя '21 в 19:59

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

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

1

Источник

user1783163 03 мар '17 в 09:49

Это 2021 год, и всем, кто, как и я, смущают другие ответы здесь, я настоятельно рекомендую вам прочитать документацию (ссылки ниже). Прилагаю сюда небольшую часть:

Чтобы добиться этого и гарантировать, что SCSS является как можно большей частью надмножества CSS, Sass скомпилирует любой @importsсо следующими характеристиками для простого импорта CSS:

Импортирует, где URL заканчивается на .css.

Импортирует с начала URL http:// или https://.

Импортирует, где URL-адрес записан как url().

Импорты с медиа-запросами.

      @import "theme.css";
@import "http://fonts.googleapis.com/css?family=Droid+Sans";
@import url(theme);
@import "landscape" screen and (orientation: landscape);

Документы:

-1

Источник

user11456480 25 июл '21 в 14:43

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

@import url('yourStyle.css')

-2

Источник

user7722334 01 мар '18 в 20:47

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

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

-2

Источник

user1115237 22 июн '14 в 10:00

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

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

-4

Источник

user314346 29 сен '15 в 04:12

Просто.

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

-8

Источник

user571838 19 авг '11 в 04:32

Другие вопросы по тегам sass

user111033 04 фев '12 в 21:10 2012-02-04 21:10 · Accepted Answer · 2012-02-04 21:10

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

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

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

@import "path/to/file";

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

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

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

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

17 ответов

импортировать (включать) необработанный CSS-файл

импортировать CSS-файл традиционным способом