Многие файлы SCSS/SASS в один файл CSS?
Можно ли заставить sass прослушивать каталог со многими sass файлами и генерировать один файл CSS? Я нашел способ включить много sass файлов в один (style.scss):
@import "scss/header";
@import "scss/footer";
Затем запустите следующий код:
sass --watch style.scss:style.css
но проблема в том, что я должен изменить этот файл перед созданием нового файла CSS.
Ответы
Ответ 1
Если вы смотрите каталог, sass сможет замечать изменения в @imported файлах и обновлять зависимые файлы.
style.scss:
@import "header";
@import "footer";
И выполните:
sass --watch .
Он скомпилирует все файлы в каталоге в .css; игнорируя файлы, имя которых начинается с _
.
Я изменяю _header.scss или _footer.scss, если также обновит style.scss.
Вы также можете выводить в другой каталог:
sass --watch .:output_dir/
Ответ 2
Вы можете сказать SASS, чтобы посмотреть всю папку с помощью
sass --watch application/sass:public/stylesheets
Если вы импортируете все ваши частичные файлы, это должно сгенерировать один файл. Каждый раз, когда вы редактируете файл в папке, файлы CSS будут генерироваться автоматически.
Ответ 3
Просто хотел добавить,
Вы также можете вызывать переменные ($) и Mixins из других файлов.
Пример:
_variable.scss = $primary:#000
_header.scss = header {color:$primary;}
_footer.scss = footer {background:$primary}
custom.scss:
@import "_variables.scss";
@import "_header.scss";
@import "_footer.scss";
Выход = custom.css
header {color:#000;}
footer {background:#000;}