Nikovit <Путешествия и разработка>

Добавляем SASS в PhpStorm

41146.png
Настраиваем PhpStorm для автоматической компиляции SASS файлов с помощью node.js и модуля node-sass:

1. Устанавливаем node-sass:

npm install node-sass -g

2. Заходим в настройки PhpStorm(File -> Settings), переходим в Tools -> File Watchers и добавляем новый ватчер из темплейта SASS.

1-768x485.png

3. Заполняем поля:

Program: c:\Users\ИМЯ_ПРОФИЛЯ\AppData\Roaming\npm\node-sass.cmd

Arguments: —source-map-embed $FileName$

В Other options ставим галочку: Create output file from stdout

4. В своих проектах я обычно создаю папку css, а в ней лежат *.css файлы и папка с sass

2018-01-23-2.png

поэтому в поле Output paths to refresh добавляем в начало ../

должно получиться ../$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map

2018-01-23-1-768x571.png

И еще важное дополнение в настройках деплоя

2018-02-27 (1).png

необходимо остановить галочку Upload external changes, иначе скомпилированные css файлы не будут загружаться на сервер

2018-02-27.png