Как объединить файлы .CSS с Sass (или другим инструментом)?

Я могу использовать Sass для компиляции нескольких входных файлов .SCSS или .SASS в один выходной файл .CSS с помощью @import as описанный здесь.

Если я использую @import для включения обычных файлов .CSS, они не объединены. Выходной файл .CSS по-прежнему содержит директивы @import. Это имеет смысл.

Но есть ли способ переопределить это поведение, возможно, переключение командной строки на компилятор Sass? Другими словами, могу ли я сказать Sass, чтобы попытаться принудительно объединить @import "foo.css"; так же, как если бы это был файл .SCSS?

Я использую стороннюю библиотеку (Google Closure Library) со многими файлами .CSS. Я использую только некоторые из них в своем проекте. Я бы предпочел избегать ручных решений, таких как переименование всех этих файлов как .SCSS(хотя это, похоже, работает), или копирование и вставка их содержимого в мой .SCSS файл (также работает). И я не хочу обслуживать их всех для импорта на стороне клиента. Я бы просто хотел, чтобы Sass включил несколько .CSS файлов, которые я использую как "как есть", и создаю единую таблицу стилей вывода. Возможное? Есть ли другие инструменты, на которые я должен смотреть?

Ответы

Ответ 1

Я не нашел способ сделать это в Sass.

Мое обходное решение заключается в том, чтобы импортировать библиотеки третьей части непосредственно из их URL-адресов. Конечно, это работает только для библиотек CSS, которые обслуживаются через URL-адреса. Он по-прежнему импортирует несколько файлов, но по крайней мере мне не нужно переименовывать файлы и иным образом управлять модифицированной копией библиотеки CSS поставщика.

Пример:

// ORIGINAL: locally managed, modified copy (bad), no @import in output (good)
@import 'my_modified_copy/closure/goog/css/common.scss';

// WORKAROUND: vendor-managed (good): @import in output (bad but acceptable)
@import 'http://closure-library.googlecode.com/svn/trunk/closure/goog/css/tab.css';

Перед выпуском я, вероятно, добавлю script, чтобы вытащить текущую версию от поставщика и переименовать все .css файлы в виде .scss файлов. Но на данный момент вышеупомянутое обходное решение приемлемо для разработки.

Ответ 2

каждый файл CSS также является допустимым SCSS.. поэтому, если вы меняете файлы, которые вам "невидимо" импортируются или объединяются в _filename.scss, а затем @import из основного файла scss с помощью @import "filename"; (расширение необязательно), оно должно компилироваться к одному большому CSS без инструкций @import внутри него

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

Ответ 3

Это может быть сделано на стороне сервера и сэкономить вам немного хлопот, если это вариант. Поскольку вы просто объединяете файлы вместе, и поскольку это просто CSS, не должно быть конфликтов в информации, которая должна нанести вред вашему сайту. Кроме того, этот способ дает вам гибкость в обновлении CSS в качестве улучшенных фреймворков.

Ruby - не мой язык выбора, но все же очень жизнеспособный, чтобы делать все необходимое здесь. В Ruby есть инструмент, который будет делать это для вас с помощью CSS, а также JS файлов. Взгляните на это сообщение в блоге, чтобы получить краткое изложение: http://cjohansen.no/en/ruby/juicer_a_css_and_javascript_packaging_tool

Я надеюсь, что это будет полезно, и, пожалуйста, дайте мне знать, если вам нужно что-нибудь еще на этом.