Настройка sass/scss для PhpStorm в Windows

Подготовка

Если у вас установлена ​​старая версия Node.js, рекомендуется сначала удалить ее. Также убедитесь, что папки npm и npm-cache в C:\Users\YourUsername\AppData\Roaming
удалены.

Установка Node.js для Windows.

Откройте https://nodejs.org/en/download/ , загрузите и установите последнюю версию для Windows.

Установите SASS

После установки Node.js откройте командную строку Windows и выполните следующую команду: (если вам нужен less, просто замените sass на less )

npm install -g sass

Вывод:

added 17 packages, and audited 18 packages in 2s

2 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Ура, теперь Sass установлен.

Настройка PhpStorm

Теперь нам нужно настроить File Watcher в PhpStorm.

Перейдите в File > Settings > Tools > File Watchers > Click the plus icon (top right) > Select your preferred template (SCSS or Sass). Если вы не уверены, какой шаблон использовать, я бы порекомендовал SCSS.

В настройках File Watcher PhpStorm должен предварительно заполнить эти поля, однако иногда он не находит правильный путь к программе . Убедитесь, что поле «Программа» указывает на правильный компилятор. В моем случае это в формате C:\Users\YourUserName\AppData\Roaming\npm\sass. Обязательно замените YourUserName своим именем пользователя Windows.

Ваши настройки File Watcher должны быть следующими:

Program: C:\Users\YourUsername\AppData\Roaming\npm\sass
Arguments: --no-cache --update --style=compressed $FileName$:$FileNameWithoutExtension$.css
–style=compressed – для сжатия содержимого, удалить если не нужно.
Output paths to refresh: $FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map

В Advanced Options оставляем только Auto-save edited files to trigger the watcher, что бы не генерировать новые файлы, если мы их не редактировали.

Нажмите «ОК» , чтобы закрыть «Edit Watcher» , и еще раз «ОК» , чтобы закрыть окно «Настройки» .