SCSS in PHPStorm

SCSS in PHPStorm

To create a File Watcher 

  1. In the Settings/Preferences dialog (Ctrl+Alt+S), click File Watchers under Tools. The File Watchers page that opens shows the list of already configured File Watchers.

  2. Click Add button or press Alt+Insert. Depending on the tool you are going to use, choose the Less, Sass, or SCSS predefined template from the list.

  3. In the Program field, specify the path to the compiler executable file or archive depending on the chosen predefined template.

    • lessc.cmd for Less.

    • sass.cmd for Sass/SCSS.

    If you followed the standard installation procedure with npm, PhpStorm locates the required files itself and fills in the field automatically. Otherwise, type the path manually or click Browse button and choose the file location in the dialog that opens.




Program
C:\Ruby25-x64\bin\sass

Arguments
$FileParentDir$\scss\$FileName$:$FileParentDir$\css\$FileNameWithoutExtension$.css

Output paths to refresh: 
$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map