File Watchers в PhpStorm

Для начала нам нужно установить плагин File Watchers.

Я работаю на Ubuntu, в системе должны быть установлены node и node-sass, их можно установить по отдельности, а можно в виде пакета:

sudo apt install node-node-sass

Переходим в PhpStorm и идем по пути File -> Settings Tools -> File Watchers или в русской версии Файл -> Настройки -> Инструменты -> Файловые наблюдатели:

Вносим настройки как на скрине:

1. Тип файла тип файла за которым будет наблюдать File Watchers
2. Область действия кукую область будет охватывать File Watchers
3. Программа тут мы должны указать путь до исполнительного файла, в данном случае до исполнительного файла node-sass которая и отвечает за компиляцию файлов sсss. Итого должно получится: /usr/bin/node-sass
4. Аргументы указываем аргумент --source-map-embed который говорит что нужно сгенерировать карту surcemap и макрос $FileName$ который подставит название файла для поиска. Итого должно получится: --source-map-embed $FileName$
5. Путь вывода для обновления куда складывать скомпилированный файл. Итого должно получится: $FileParentDir$/dist/style.bundle.css
6. Рабочая директория директория где наблюдаем за файлами. Итого должно получится: $FileDir$