File Watcher für Sass oder SCSS in PhpStorm einrichten

|

PhpStorm bietet die Möglichkeit, über einen File Watcher Sass oder SCSS-Dateien direkt bei der Bearbeitung zu kompilieren. Dazu muss man nicht mal unbedingt die Datei speichern.

In meinem Fall war die einzige kleine “Besonderheit”, dass die CSS-Datei in einem anderen Verzeichnis liegen sollte als die SCSS-Dateien.

Folgende Projektstruktur war gegeben:

Projektstruktur in PhpStorm

Die SCSS-Dateien liegen im Verzeichnis Resources/Private/Sass/, die kompilierte CSS-Datei soll nach Resources/Public/Css/

Um einen entsprechenden File Watcher anzulegen, sind folgende Schritte auszuführen:

  1. Einstellungen von PhpStorm -> Tools -> File Watchers
  2. Auf das kleine “Plus”-Icon unten links klicken
  3. SCSS auswählen (wenn man mit .scss-Dateien arbeitet)
  4. Im Eingabefeld für “Arguments” folgendes einfügen:

    –style=compressed $FileDir$/$FileName$:../../Public/Css/$FileNameWithoutExtension$.css

    Über den Parameter “style” kann man noch das Ausgabeformat der CSS-Datei steuern.

File Watcher Einstellungen für SCSS

1 Gedanke zu „File Watcher für Sass oder SCSS in PhpStorm einrichten“

Schreibe einen Kommentar