Visual Studio Code – Wie man einen Less und Sass Transpiler einbindet, um CSS Dateien zu erzeugen.

Wie man im Visual Studio Code Less oder Sass Files kompiliert, wird in folgendem Artikel beschrieben. Mit dem integrierten Task-Runner kann man ganz leicht Less oder Sass Dateien in CSS Dateien umwandeln lassen.
Dafür greifen wir auf die Node.js Module less bzw. node-sass zurück.

Zunächst installieren wir diese.

npm install -g node-sass less

Dann erstellen wir im Projekt eine Tasks.json oder erweitern die vorhandene. Dort schreiben wir folgendes hinein:

{
 "version": "2.0.0",
 "tasks": [
   {
     "label": "Sass Compile",
     "type": "shell",
     "command": "node-sass styles.scss styles.css",
     "group": "build"
   },
   {
     "label": "Less Compile",
     "type": "shell",
     "command": "lessc ./less/styles.less ./css/styles.css",
     "group": "build",
     "problemMatcher": [
       "$lessc"
     ]
   }
 ]
}

Die Pfade und Dateinamen unter command müssen mit den vorhandenen übereinstimmen.

Alle Less-Dateien auf einmal lassen sich damit leider nicht kompilieren, dafür müsste man einen komplexeren Task-Runner, wie z.B. Gulp, verwenden. Man kann allerdings mittels @Import-Anweisung mehrere Less Dateien in ein CSS-File übersetzen. Dazu erstellt man z.B. eine styles.less und importiert dort alle weiteren Less-Dateien. Gibt man im Task unter command die styles.less als Eingabe an, werden alle importierten Less-Dateien mit in die als Ausgabe angegebene CSS-Datei übernommen.

Ich hoffe wie immer, diese erstbeste Lösung war hilfreich.

---

Quellen:

• Visual Studio Code – CSS, Less und Sass Support