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: