Настройка Phpstorm для компиляции SCSS в CSS

10.05.2020

В редакторе Phpstorm можно настроить автоматическую компиляцию SCSS в CSS.

Настройка scss компилятора

  1. Скачиваем Руби (выбираем последний рализ из категории without Devkit) и устанавливаем его.

  2. Запускаем консоль, через "Пуск" - start command prompt with ruby

    pic1

  3. В консоли выполняем:

     
    gem install sass
    

Настройка PhpStorm

  1. Создаем проект, в нем файл с расширением scss

  2. Открываем настройки: File - Settings (ctrl + alt + s) - Tools - File Watchers

    Там нажимаем на "+" (добавить)

    pic1

  3. Есть несколько вариантов настройки, я выбрал Compass SCSS

    pic1

  4. В открывшимся окне, нужно указать путь до компилятора scss. Например, с:\Path_TO_Ruby\bin\scss.bat

    pic1

  5. Также стоит указать несколько настроек, отключающих кэш и создание карты:

    pic1

     
    --no-cache
    --update
    --sourcemap=none
    $FileName$:$FileNameWithoutExtension$.css
    

  6. Последнее, что останется сделать, это включить компиляцию:

    pic1

На этом настройки закончены, после сохранения изменений в scss файле, в той же директории будет создан файл идентичным именем и расширением css, в котором уже бкдет скомпилированный результат.


Яндекс.Метрика