SASS mit libsass in Nodejs (1): Installation

Posted by in CSS, Nodejs, Präprozessor

Dieser Blog beschreibt das Setup das notwendig ist, um SASS anstatt mit Ruby mit Nodejs zu kompilieren. Dazu wird die Library namens libsass benötigt und der Taskrunner Grunt mit dem Modul grunt-sass. Grunt sorgt dafür, dass bei einer Änderung in den SASS-Dateien automatisch das CSS neu erstellt wird. So erspart man sich nervige manuell angestoßene Kompilierungsvorgänge.

package.json

Zuerst erstellen wir einen Projektordner und legen in diesen eine package.json mit folgendem Inhalt:

Soweit so gut und nichts Besonderes. grunt-contrib-watch sorgt für das automatische Neukompilieren bei Änderung von SASS-Dateien. grunt-sass musste ich auf die Version 0.12.1 herabsetzen, da es in der höheren Version zum jetzigen Zeitpunkt einen Bug gab.

Anschließend kann man mit npm install auf der Konsole die Abhängigkeiten installieren. Zumindest bei mir schlug jedoch der Aufruf grunt anschließend fehl, was mich dazu veranlasst hat Grunt global zu installieren mit npm install -g grunt-cli. Damit hat es dann funktioniert.

Task für Grunt anlegen

Zum vollständigen Glück wird noch eine Taskfile namens Gruntfile.js im Projektordner angelegt.

Unter dem Task watch wird festgelegt, dass nach Änderungen im Ordner sass Ausschau gehalten werden soll. Der Task sass bekommt die options sourceComments:map und als outputStyle:expanded damit keine minimierte Version des CSS erstellt wird. Will man die minimierte Version, dann wählt man stattdessen compressed.

Der erste Kompiliervorgang

Bevor grunt gestartet werden kann, sollte eine SASS-Datei unter sass/styles.scss erstellt werden. Mit grunt startet man den Taskrunner und erfreut sich anschließend am neuen Präprozessor 🙂

Links

Blogpost über libsass von Ben Frain