it-swarm.com.de

Kompilieren von less / sass-Dateien in Visual Studio 2017

In VS <= 2015 können wir die WebEssentials-Erweiterung verwenden, die sich um das Kompilieren der less/sass-Dateien für uns kümmert. Derzeit wird VS 2017 jedoch nicht unterstützt. Kennen Sie eine ähnliche Erweiterung, mit der less/sass beim Erstellen kompiliert werden kann?

74
Mihail Shishkov

WebEssentials wird in mehrere Erweiterungen aufgeteilt. Ich glaube, die Funktionalität, die Sie wollen, ist jetzt in der Erweiterung Web Compiler .

Wenn Sie auf Erweiterungen verzichten möchten, können Sie einen Task-Runner wie Gulp verwenden. In hier finden Sie eine exemplarische Vorgehensweise zum Integrieren von Gulp-Tasks in VS.

90
Jimmy

UPDATE - LESEN SIE BITTE DIESE SEITE DURCH, WIE ICH EINE ZUSÄTZLICHE ANTWORT HINZUGEFÜGT HABE (DIESE SCHEINT NICHT MEHR FÜR MICH ZU ARBEITEN).

Für diejenigen, wie ich, die Gulp oder Grunt oder Shriek oder Wail nicht kennen und nicht möchten, KANN Visual Studio 2017 Ihre SCSS-Dateien automatisch kompilieren lassen, so wie es früher in Visual Studio 2015 der Fall war Schritte unten haben bei mir funktioniert.

Deinstallieren Sie zuerst alle alten Erweiterungen/Nuget-Pakete für den Web Compiler (ich weiß nicht, ob dies erforderlich ist oder nicht).

Gehen Sie zur VSIX-Galerie-Download-Seite und wählen Sie, ob Sie den Web Compiler herunterladen möchten.

enter image description here

Beachten Sie, dass ich dies zuerst durch Auswahl von Extras / Erweiterungen und Updates in getan habe Visual Studio. Obwohl dies zu funktionieren schien, stellte ich fest, dass meine partiellen SCSS-Dateien nicht automatisch zu CSS kompiliert wurden, als ich Änderungen an ihnen vornahm (I war nicht der einzige ).

Sie sollten nun in der Lage sein, mit der rechten Maustaste auf Ihre Master-SCSS-Datei zu klicken und die unten gezeigten Optionen auszuwählen. Dadurch sollte automatisch eine Datei mit dem Namen compilerconfig.json in erstellt werden das Stammverzeichnis Ihres Projekts (dieser Schritt ist wahrscheinlich nicht erforderlich, wenn Sie bereits über diese Datei verfügen):

enter image description here

Ab diesem Zeitpunkt schien alles in Ordnung zu sein. Puh! Vielen Dank übrigens an Mads Kristensen für diese Erweiterung - alles, um nicht etwas Neues zu lernen ...

39
Andy Brown

Einfache antwort:

8
S.Serpooshan

Meine vorherige Antwort hat ein paar Monate für mich funktioniert, funktioniert aber jetzt nicht mehr. Wenn ich versuche zu kompilieren, erhalte ich im Fehlerfenster eine Meldung über Probleme mit dem CompilerConfig-Schema und kann diese nicht beheben (weder Googeln noch Installieren/Deinstallieren haben geholfen).

Eine alternative Antwort ist die Verwendung von CompileSASS , einem viel einfacheren Add-In mit (viel) weniger Online-Dokumentation, das jedoch sehr gut funktioniert. Die einzigen Nachteile, die ich sehen kann, sind:

  • das generierte CSS befindet sich im selben Ordner wie das SCSS. Daher musste ich einige Dinge auf meiner Website verschieben, um dies zu berücksichtigen. und
  • das generierte CSS wird nur minimiert, soweit ich sehen kann

Sobald Sie das Add-In installiert haben (ich verwende VS 2017), können Sie unter Extras> Optionen die Einstellungen ändern:

enter image description here

Ich hoffe, ich kann jetzt wieder arbeiten! Übrigens, danke an alle Add-In-Autoren - ich will nicht schimpfen.

5
Andy Brown

Es gibt jetzt auch einen weniger spezifischen Compiler. https://github.com/madskristensen/LessCompiler

2
Justin