Поначалу для компиляции sass-файлов в css я использовал сторонние программы, вроде Koala. Через какое-то время она стала жутко тормозить и грузить комп и чем больше отслеживаемых файлов, тем больше эти тормоза. После этого я попробовал поработать через Grunt, но там не очень удобно добавлять каталоги, да и когда их много для отслеживания, тоже возникает большая нагрузка.
В итоге я поменял сам подход к sass-компиляции. Вместо того, чтобы отслеживать сразу кучу каталогов и файлов, достаточно отслеживать только те, с которым идет работа прямо сейчас.
В Sass уже встроена поддержка отслеживания файлов (watch), поэтому можно легко ей воспользоваться.
Важно! Сейчас команда Sass поддерживает только компилятор Dart Sass. Старые версии, основанные на Ruby, не поддерживают многие новые возможности Sass.
В каталог шаблона assets размещается файл sass-watch.bat такого содержания:
sass --watch sass:css --style=compressed
Пути указываются относительно этого файла. В данном случае это будет так:
- assets/sass/ — каталог, где находятся scss-файлы
- assets/css/ — каталог, куда помещаются скомпилированные css-файлы
Если не нужно создавать map-файл, то добавьте параметр --no-source-map.
Теперь, когда нужно включить компиляцию, достаточно запустить этот bat-файл, который запустит Sass в режиме watch. После того, как работа завершена, окно можно закрыть.
В некоторых случаях нужно просто выполнить компиляцию файлов без режима watch. В этом случае можно сделать sass-compile.bat:
sass --update sass:css --style=compressed
Теперь пару слов о самих sass/scss-файлах. Если имя файла начинается с символа подчеркивания («_»), то такой файл не компилируется (но отслеживается!). Таким образом без символа подчеркивания нужно оставить только тот файл, который следует скомпилировать. Обычно это style.scss из которого получится style.css.
Комментариев: 8 RSS
1Николай06-09-2018 15:19
Скопировал код, compressed заменил на expanded. Запустил и ничего не произошло.
У меня куча sass фалов которые лежат в разных пяти папках.
В папке assets/css/ лежат следующие папки:
\.sass-cache
\1-tools
\2-basics
и т.д. ещё три папки и один файл main.sass
Подскажите, что я сделал неправильно?
2MAX06-09-2018 18:12
Используйте для scss-файлов отдельный каталог (assets/sass). Сейчас у вас всё в куче.
3Николай06-09-2018 18:31
Переименовал папку assets/css/ в assets/sass/, на всякий случай создал папку assets/css/, хотя батник должен сам её сделать, внёс изменения в батник:
Запустил и ничего не изменилось.
4MAX06-09-2018 19:27
Параметры в одну строчку? Какое сообщение в консоли?
5Николай07-09-2018 11:03
Спасибо, всё получилось!
Ошибка, как правильно сказали, параметры не в строчку были, а в столбик.
6BatyrTM07-08-2021 09:32
У меня Ruby Sass 3.7.4.
Запускаю:
start /min sass --debug-info --watch assets/sass/:assets/css/ --sourcemap=none --style compressed
При компиляции создается кэш.
создается style.css
Но внутри style.css то что и в style.scss.
@use 'modules/copyright';@use 'modules/reset';@use 'modules/utilities'
Что за лабуда. Не могу разобраться. Может версия не подходит?
Может по подробнее напишите какие скачивать sass-ы компиляторы.
Вроде внимательно читал. Но все равно не получается компиляция.
Помогите пож.
7MAX08-08-2021 09:00
Да, вам нужно использовать Dart Sass: https://sass-lang.com/documentation/cli/dart-sass
8Batyrtm09-08-2021 14:46
Dart Sass сработал. Спасибо!