Sass mit node-sass (Node.js)

Links

https://webdesign.tutsplus.com/tutorials/watch-and-compile-sass-in-five-quick-steps--cms-28275

Quickstart

Installation

• Node.js mit dem npm Paketmanager sollte installiert sein
• node-sass Installieren falls noch nicht vorhanden:

npm install node-sass

oder

npm install -D node-sass

Mit der -D Option schreibt npm die Abhängigkeit gleich in ein Package.json File wenn man das nutzen will (vorher mit npm init anlegen). Im Ordner node-modules werden auch die binaries abgelegt.

oder

npm install --save-dev node-sass

SCSS Files Kompilieren

node-sass --include-path sass INPUT_FILE.scss OUTPUT_FILE.css

Tutorials

Tutorial: Kurz und schmerzlos

Eine Praxistaugliches Beispiel mit einer Variante die ohne nodeamon und ohne Package.json auskommt

Im Projektordne Basisstruktur anlegenr:

mkdir scss css js images

Package.json anlegen

npm init

node-sass Modul

npm install -D node-sass

Installiert node-sass mit allen tools im Projektordner unter node-modules (wir verwenden also node-sass lokal)

touch scss/styles.scss

Unser zentrales scss File. Abhängige scss Files werden später über @import nachgeladen

In Package.json Compiler Shortcut eintragen:

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "sass-compile": "node-sass --include-path sass scss/styles.scss css/styles.css"
  },

Ausführen mit:

npm run sass-compile

Tutorial: Ein Projekt mit SASS und dem NodeJS Server

Ziel ist ein einfach aber effektiv zu handelndes Projekt ohne die Nutzung von gulp.js nur mit npm Skripten.

Hinweis: In diesem Beispiel wird als Watcher der nodeamon eingesetzt. Im nächsten Beispiel nutzen wir eine noch einfachere Version welches einfach node-sass direkt zum Watchen nutzt.

Basis Struktur

• Projektordner anlegen z.B.:

mkdir www && cd www 

• Im Projektordner NPM Initialisieren (erstellt ein package.json File)

npm init

• css und scss und bin Ordner anlegen (bin enthält später command line scripte)

mkdir bin public scss && mkdir public/css

• main scss File

touch scss/main.scss

node-sass und nodeamon installieren

npm install -D node-sass nodemon

Hinweis: nodeamon ist eigentlich umständlich. Es wird in diesem Beispiel als Watcher genutzt. Aber node-sass kann das eigentlich selbst (siehe andere Beispiele)

• Mit der -D Option schreibt npm die a Abhängigkeit in das package.json
• node-sass wrappt die Libsass Bibliothek und kompiliert später die scss Dateien zu css Dateien
• nodemon überwacht normalerweise Änderungen an Serverseitigem Node.js Code und überwacht in unserem Fall, ob sich ein scss File ändert
• Dummy scss

$badass: #bada55;
body { 
  margin: 0; 
  background-color: $badass; 
}

Kompilieren

Skripte im Package.json erweitern:

“scripts”: {
  “build-css”: “node-sass --include-path scss scss/main.scss   public/css/main.css”
},

..un Testen

npm run build-css

Das funktioniert schon mal. Als nächstes ein Watcher, damit sich das css jedesmal bei Änderungen des scss Files automatisch kompiliert:

Watcher

Wir erweitern unser Package.json mit einem watch-css Skript

“scripts”: {
 “build-css”: “node-sass --include-path scss scss/main.scss public/css/main.css”,
 “watch-css”: “nodemon -e scss -x \”npm run build-css\””
},

Ausführen.

npm run watch-css

Jetzt wird automatisch kompiliert...

Aufräumen

Wir können die beiden Skripte build-css und watch-css auslagern. Dann wird alles aufgeräumter. Dazu legen wir zwei Dateien (ohne Suffix) an:

bin/build-css

node-sass --include-path scss scss/main.scss public/css/main.css

bin/watch-css

nodemon -e scss -x “npm run build-css”

Ausführbar machen:

chmod +x bin/build-css
chmod +x bin/watch-css

Und das Package.json anpassen:

“scripts”: {
 “build-css”: “./bin/build-css”,
 “watch-css”: “./bin/watch-css”
},

Snippets für Varianten

• Script Teil in package.json erweitern

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "scss": "node-sass --watch scss -o css"
}

node-sass: Refers to the node-sass package.

--watch: An optional flag which means “watch all .scss files in the scss/ folder and recompile them every time there’s a change.”

scss: The folder name where we put all our .scss files.

-o css: The output folder for our compiled CSS.

When we run this script it will watch every .scss file in the scss/ folder, then save the compiled css in css/ folder every time we change a .scss file.

5. Run the Script To execute our one-line script, we need to run the following command in the terminal:

npm run scss

And voila! We are watching and compiling SASS.