So kompilieren Sie weniger / sass-Dateien in Visual Studio 2017

85

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. Ist Ihnen eine ähnliche Erweiterung bekannt, mit der beim Erstellen less / sass kompiliert werden kann?

visual-studio sass less visual-studio-2017 css-preprocessor Mihail Shishkov
quelle

Antworten:

102

WebEssentials wird in mehrere Erweiterungen aufgeteilt. Ich glaube, die gewünschte Funktionalität befindet sich jetzt in der Web Compiler- Erweiterung.

Wenn Sie dies ohne Erweiterungen tun möchten, können Sie einen Task Runner wie Gulp verwenden. Sehen Sie hier für eine Komplettlösung, wie Gulp Aufgaben in VS integrieren

Jimmy
quelle
Ich verwende Web Compiler als Erweiterung in VS 2019, um einige sehr alte .less-Dateien zu kompilieren, und es funktioniert immer noch hervorragend.
Klewis
48

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

Für diejenigen wie mich, die Gulp oder Grunt oder Shriek oder Wail nicht kennen und nicht möchten, können Sie Visual Studio 2017 veranlassen, Ihre SCSS-Dateien automatisch zu kompilieren, so wie es früher in Visual Studio 2015 der Fall war Die folgenden Schritte haben bei mir funktioniert.

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

Gehen Sie zur Download-Seite der VSIX-Galerie und laden Sie den Web Compiler herunter.

Geben Sie hier die Bildbeschreibung ein

Beachten Sie, dass ich dies zuerst getan habe, indem ich in Visual Studio Extras / Erweiterungen und Updates ausgewählt habe . Obwohl dies zu funktionieren schien, stellte ich fest, dass meine partiellen SCSS-Dateien nicht automatisch zu CSS kompiliert wurden, als ich Änderungen daran vornahm (ich 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 im Stammverzeichnis Ihres Projekts erstellt werden (dieser Schritt ist wahrscheinlich nicht erforderlich, wenn Sie diese Datei bereits haben). ::

Geben Sie hier die Bildbeschreibung ein

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

Andy Brown
quelle
6
Ich verstehe diesen Kommentar nicht! Ich bin mir nicht sicher, welche Antwort akzeptiert wird, aber keine von ihnen ähnelt der von mir gegebenen.
Andy Brown
1
Die akzeptierte Antwort ist die mit dem grünen Häkchen. Derzeit hat es die meisten Upvotes und es wird empfohlen, dieselbe Web Compiler-Erweiterung zu verwenden. Wie auch immer, ich mag deine Antwort wegen der Bilder.
Mihail Shishkov
1
Vielen Dank. Meine Antwort gibt eine Lösung ohne Gulp / Grunt und gibt auch die zusätzlichen Details, die die Leute brauchen werden. Ich habe mir die angekreuzte Antwort (unter anderem) angesehen, aber sie hat mein Problem ohne die oben genannten zusätzlichen Informationen nicht gelöst. Deshalb habe ich mir die Mühe gemacht, Beiträge zu veröffentlichen, um zu vermeiden, dass andere die gleiche Zeit verschwenden, die ich damit verbracht hatte, dieses Problem zu lösen .
Andy Brown
1
Versuchen Sie, die akzeptierte Antwort zu lesen. Sie sagt dasselbe, schlägt aber auch vor, wie man Gulp
Keith Nicholas verwendet.
OK, ich sehe jetzt, dass die akzeptierte Antwort dasselbe sagt - also fügt meine nur mehr Details hinzu. Hoffentlich finden faule Leser wie ich dies nützlich!
Andy Brown
5

Meine vorherige Antwort hat einige Monate für mich funktioniert, funktioniert jetzt aber nicht mehr. Wenn ich versuche zu kompilieren, erhalte ich im Fehlerfenster eine Meldung über Probleme mit dem CompilerConfig-Schema und kann dies nicht lösen (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 hervorragend funktioniert. Die einzigen Nachteile, die ich sehen kann, sind:

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

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

Geben Sie hier die Bildbeschreibung ein

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

Andy Brown
quelle
1
Gut, dass ich diesmal den ganzen Weg gescrollt habe. Ich wollte gerade deinem Vorgänger folgen. Antworten. Vielleicht sollten Sie es mit einer Notiz aktualisieren, wenn Sie denken, dass die Antwort nicht mehr funktioniert. :)
Radbyx
Lief wie am Schnürchen. Vielen Dank.
Radbyx
1
Wenn Sie bereits über einen Web Compiler verfügen und dieselben Fehler wie in diesem Beitrag beschrieben haben, lesen Sie meine Beiträge hier: stackoverflow.com/a/55290276/3609362 github.com/madskristensen/WebCompiler/issues/…
Matt G
2

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

Justin
quelle
Ich habe die Erweiterung heruntergeladen und installiert. Ich habe dann meine Site.less-Datei geöffnet und kann sehen, wo sich das Wasserzeichen befindet, um den Compiler zu optimieren. Ich habe dann einen Build auf meiner Site erstellt und ihn im Debug-Modus geöffnet. Wenn ich meine Site.css öffne, die sich unter Site.less befindet, befindet sich darauf der generierte Wassermak. Ich versuche dann, nach einer neu hinzugefügten Eigenschaft zu suchen, aber sie ist nicht vorhanden und ich erhalte mein CSS nicht. Irgendwelche Ideen, wie ich es dazu bringen kann, mein WENIGER zu bauen?
Caverman