Імпортувати звичайний CSS-файл у файл SCSS?

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

Схоже, це не виконується станом на час написання цього тексту:

https://github.com/sass/sass/isissue/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 , вам, ймовірно, потрібно буде використовувати використання ~на початку шляху. Отже, якщо ви хочете імпортувати наступний шлях, node_modules/bootstrap/src/core.scssви написали б щось подібне
@import "~bootstrap/src/core".

ПРИМІТКА.
Схоже, це працює не для всіх. Якщо ваш перекладач базується на цьому, libsassвін повинен працювати добре (замовіть це ). Я тестував за допомогою @importnode-sass, і це працює чудово. На жаль, це працює і не працює в деяких рубінових екземплярах.

Ви повинні додати підкреслення до файлу 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.

__

Щоб уникнути подальших спекуляцій у коментарях, пишучи це чітко: Рубі на основі Сасса все ще залишається такою особливістю нездійсненною після 7 років дискусій. На момент написання цієї відповіді обіцяно, що в 4.0 з'явиться простий спосіб досягти цього, ймовірно, за допомогою @use. Здається, незабаром відбудеться реалізація, для випуску №556 та нової функції був призначений новий тег "запланований" "Прийнято пропозицію" .@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файлу symlink , а не правило імпорту 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-one в даний час не може імпортувати Sass частинки без явного провідного підкреслення. Наприклад, з файлом partials/_partial.scss:

• @import partials/_partial.scss вдається
• @import * partials/partial.scss не вдається

Загалом, майте на увазі, що користувацький імпортер може змінити будь-яку семантику імпорту. Прочитайте документи перед початком його використання.

Якщо я маю рацію, css сумісний з scss, тому ви можете змінити розширення css на scss, і воно має продовжувати працювати. Після зміни розширення ви можете імпортувати його і воно буде включено у файл.

Якщо ви цього не зробите, sass буде використовувати css @import, який ви не хочете.

Я зрозумів елегантний спосіб, який подобається Рейлам. По-перше, перейменуйте свій .scssфайл у .scss.erb, а потім використовуйте такий синтаксис (наприклад, для CSS-ресурсу drag_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/isissue/193

Простий.

@import "шлях / до / file.css";