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

Чтобы включить CSS-файл в проект, вам нужно добавить к его имени нижнее подчеркивание и изменить расширение на .scss (например, _yourfile.scss). Затем вы можете подключить его следующим образом:

@import "yourfile";

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

Хорошие новости, всем! Крис Эппстайн создал плагин Compass с возможностью импорта CSS встраиваемым способом:

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

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

@import "CSS:library/some_css_file"

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

Для создания символической ссылки выполните следующую команду:

ln -s путь/к/css/файлу.css путь/к/sass/файлам/_файл.scss

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

@import "путь/к/sass/файлам/файл";

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

Символическая ссылка (также symlink или мягкая ссылка) — это специальный тип файла, который содержит ссылку на другой файл в форме абсолютного или относительного пути и влияет на разрешение имени файла.

– http://en.wikipedia.org/wiki/Symbolic_link

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

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

Чтобы импортировать CSS-файл в SCSS, просто используйте следующую строку:

@import "src/your_file_path";

Обратите внимание, что при этом не нужно указывать расширение .css в конце пути.