LESS mit WinLess im pre build event in CSS umwandeln


Da ich in neuen Projekten Primär mit LESS Arbeite und auch Twitter Bootstrap mit Less arbeitet, habe ich bereits versucht mit “dotless” die LESS Dateien in CSS umzuwandeln. Das mag evtl. mit einfachen LESS Dateien funktionieren, aber die aktuelle Twitter Bootstrap LESS Variante habe ich damit nicht fehlerfrei umgewandelt bekommen.

Dann bin ich durch einen Kollegen auf WinLess gestoßen, hier wird auch eine Möglichkeit geboten die LESS Dateien direkt im pre build event der Webseite in CSS umzuwandeln und das ganz einfach ohne zusätzlich installierte Komponenten.

1. Dateien bei GitHub herunterladen: https://github.com/duncansmart/less.js-windows hier direkt die ZIP Datei herunterladen und entpacken.

2. Am besten irgendwo im Solutionordner ablegen, es werden nur die unten gezeigten Dateien benötigt. Ich habe diese dann noch meiner Solution hinzugefügt, damit ich die Items mit in die Versionsverwaltung bekomme. (Die less-1.3.0.js Datei kann durch die neueste less.js ausgetauscht werden, hier muss nur der Name beibehalten werden.)

imageimage

3. Hinzufügen der PreBuildevents im Webprojekt:

CALL „$(SolutionDir)LessDependencies\lessc“ „$(ProjectDir)Content\less\_myCss.less“ „$(ProjectDir)Content\less\_mybootstrap.css“ –compress

image

In der _myCss.less Datei habe ich per Import die bootstrap.less importiert die dann alle restlichen Bootstrap Dateien importiert, daher muss hier zwingend die “myCss.less” Datei als Quelle angegeben werden. Die “_myBootstrap.css” Datei habe ich im gleichen Verzeichnis liegen, damit die Pfade zu den Bildern passen.

Jetzt wird die CSS Datei immer erstellt wenn das Projekt Compiliert wird und man braucht im Code nur noch auf die CSS Datei verlinken.

Advertisements

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s