Начав пользоваться продуктами компании 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" на одном уровне.

blog comments powered by Disqus