Начав пользоваться продуктами компании JetBrains, был очень доволен, что многое возмо "из коробки". Но приступив к изучению css препроцессоров, выяснилось, что устанавливать их компиляторы в WEBStrom (или PHPStorm) необходимо отдельно. Ставятся препроцессоры через Ruby или через Node.js. Ну это небольшой минус, в принципе установить не сложно, а вот подружить (настроить) взаимодействие внутри IDE уже совсем другое дело.
Во первых, как выяснилось, я пошёл сложным путём, выбрал препроцессор Node.js node-sass. Так как описание его интеграции с WEBStorm отсутствует. Перерыл кучу авторитетных сайтов, но натыкался на небольшую информацию, да и та ориентирована на пользователей MAC OS X или Linux. А как же пользователи Windows?
В общем под "окнами" делается всё так:
Устанавливаем в Node.js компилятор sass
npm install node-sass
Далее, ОБЯЗАТЕЛЬНО, перезагружаем ПК. (почему то без перезагрузки не заработал)
Запускаем IDE, входим в настройки (CTRL + ALT + S), далее Tools, и выбираем File Watchers.
Нажимаем "+" и добавляем "SASS".
В параметрах указываем следующее:
Program: C:\Users\user\AppData\Roaming\npm\node-sass.cmd
Arguments: $FileName$$FileName$ $FileParentDir$\css\$FileNameWithoutExtension$.css --output-style compressed
Output paths to refresh: $FileParentDir$\css\$FileNameWithoutExtension$.css
Working directory: $FileDir$
Show console: Always
Где в Program <user> это ваш системный пользователь Windows.
В данной конструкции подразумевается, что фалый лежат в разных папках "sass" и "css" на одном уровне.