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

В этой статье настроим PhpStorm для автоматической компиляции SASS с помощью:

• Node.js;
• node-sass;
• File Watchers.

После настройки:

• SASS будет компилироваться автоматически;
• CSS обновится сразу после сохранения файла;
• не придется запускать компиляцию вручную.

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

Для начала должен быть установлен:

• Node.js.

После установки Node.js открываем терминал и устанавливаем node-sass:

npm install node-sass -g

Ключ:

-g

устанавливает пакет глобально.

Настраиваем File Watchers в PhpStorm

Открываем настройки:

File → Settings

Далее переходим:

Tools → File Watchers

И добавляем новый watcher из шаблона:

• SASS.

Настройка Program

В поле:

Program

указываем путь:

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

Вместо:

ИМЯ_ПРОФИЛЯ

подставляем имя пользователя Windows.

Настройка Arguments

В поле:

Arguments

прописываем:

--source-map-embed $FileName$

Это позволит автоматически создавать source map для удобной отладки CSS.

Включаем Create output file from stdout

В разделе:

Other options

обязательно ставим галочку:

• Create output file from stdout.

Настройка структуры папок

В своих проектах я обычно использую структуру:

css/
├── style.css
├── style.css.map
└── sass/
    └── style.scss

Output paths to refresh

Если SASS-файлы лежат в папке:

sass/

а CSS должен создаваться уровнем выше, то в:

Output paths to refresh

добавляем:

../$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map

Настройка Deployment

Если используется автоматическая загрузка файлов на сервер, нужно проверить настройки Deployment.

Важно:

• снять галочку Upload external changes.

Иначе автоматически скомпилированные CSS-файлы могут не загружаться на сервер.

Что получится после настройки

После сохранения файла:

.scss

PhpStorm автоматически:

• скомпилирует CSS;
• создаст source map;
• обновит файл без ручного запуска.

Итог

Связка:

• PhpStorm;
• File Watchers;
• node-sass;

позволяет полностью автоматизировать компиляцию SASS в CSS прямо во время разработки.