Jak skompilować pliki less / sass w programie Visual Studio 2017

85

W VS <= 2015 możemy użyć rozszerzenia WebEssentials, które zajmuje się kompilacją plików less / sass za nas, ale obecnie nie obsługuje VS 2017. Czy znasz podobne rozszerzenie, które może skompilować mniej / sass podczas kompilacji?

visual-studio sass less visual-studio-2017 css-preprocessor Mihail Shishkov
źródło

Odpowiedzi:

104

WebEssentials jest dzielone na wiele rozszerzeń. Uważam, że funkcjonalność, której potrzebujesz, znajduje się teraz w rozszerzeniu kompilatora sieci Web .

Jeśli chcesz to zrobić bez rozszerzeń, możesz użyć programu do uruchamiania zadań, takiego jak Gulp. Zobacz tutaj, aby zapoznać się z instrukcją integracji zadań Gulp z VS.

Jimmy
źródło
Używam Web Compiler jako rozszerzenia w VS 2019, aby pomóc skompilować bardzo stare pliki .less i nadal działa świetnie.
klewis
1
UWAGA: Kompilator sieciowy został porzucony, ostatnia aktualizacja miała miejsce 5 lat temu. Ma kilka nierozwiązanych problemów, ale trochę działa.
Alex
Kompilator sieciowy działał dla mnie w VS 2019, ale nie będzie automatycznie rekompilował. Bez użycia pudełka. Aby utworzyć plik compilerconfig.json, musisz raz ręcznie uruchomić kompilację (zobacz tę odpowiedź ). Następnie będzie automatycznie rekompilować pliki .less.
neizan
49

AKTUALIZACJA - PROSZĘ PRZECZYTAĆ TĘ STRONĘ, JAK DODAŁEM DODATKOWĄ ODPOWIEDŹ (TA JUŻ NIE WYDAJE SIĘ DZIAŁAĆ).

Dla tych, takich jak ja, którzy nie znają Gulp, Grunt, Shriek lub Wail i nie chcą tego, możesz sprawić, by program Visual Studio 2017 automatycznie kompilował pliki SCSS, tak jak w programie Visual Studio 2015. poniższe kroki zadziałały dla mnie.

Najpierw odinstaluj wszystkie stare rozszerzenia / pakiety Nuget dla Web Compiler (nie wiem, czy jest to konieczne, czy nie).

Przejdź do strony pobierania galerii VSIX i wybierz pobranie kompilatora sieci Web.

wprowadź opis obrazu tutaj

Zwróć uwagę, że zrobiłem to najpierw, wybierając narzędzia / rozszerzenia i aktualizacje w programie Visual Studio. Chociaż wydawało się, że to działa, odkryłem, że moje częściowe pliki SCSS nie były automatycznie kompilowane do CSS, kiedy wprowadzałem w nich zmiany (nie byłem jedyny ).

Powinieneś teraz być w stanie kliknąć prawym przyciskiem myszy główny plik SCSS i wybrać opcje pokazane poniżej, co powinno automatycznie utworzyć plik o nazwie compilerconfig.json w katalogu głównym twojego projektu (ten krok jest prawdopodobnie niepotrzebny, jeśli już masz ten plik) :

wprowadź opis obrazu tutaj

Od tego momentu wszystko wydawało się działać dobrze. Uff! Nawiasem mówiąc, podziękowania dla Madsa Kristensena za to rozszerzenie - wszystko, aby uniknąć uczenia się czegoś nowego ...

Andy Brown
źródło
6
Nie rozumiem tego komentarza! Nie jestem pewien, jaka jest zaakceptowana odpowiedź, ale żadna z nich nie jest podobna do tej, którą podałem.
Andy Brown
1
Zaakceptowaną odpowiedzią jest ta z zielonym haczykiem. Obecnie ma najwięcej głosów pozytywnych i sugeruje użycie tego samego rozszerzenia Web Compiler. W każdym razie podoba mi się twoja odpowiedź ze względu na zdjęcia.
Mihail Shishkov
1
Dzięki. Moja odpowiedź daje rozwiązanie bez użycia Gulp / Grunt, a także podaje dodatkowe szczegóły, których ludzie będą potrzebować. Spojrzałem na zaznaczoną odpowiedź (między innymi), ale nie rozwiązało to mojego problemu bez dodatkowych informacji powyżej - stąd dlaczego podjąłem wysiłek, aby opublikować, aby inni nie marnowali tego samego czasu, który spędziłem na próbach rozwiązania tego .
Andy Brown,
1
spróbuj przeczytać zaakceptowaną odpowiedź, mówi to samo, ale sugeruje również, jak używać Gulp
Keith Nicholas
OK, teraz widzę, że zaakceptowana odpowiedź mówi to samo - więc moja po prostu dodaje więcej szczegółów. Mam nadzieję, że leniwi czytelnicy, tacy jak ja, uznają to za przydatne!
Andy Brown,
5

Moja poprzednia odpowiedź działała u mnie przez kilka miesięcy, ale teraz już nie działa. Kiedy próbuję kompilować, w oknie Błędy pojawia się komunikat o problemach ze schematem CompilerConfig i nie mogę tego rozwiązać (ani Google, ani instalacja / deinstalacja nie pomogły).

Tak więc alternatywną odpowiedzią jest użycie CompileSASS , który jest znacznie prostszym dodatkiem, z (znacznie) mniejszą ilością dokumentacji online, ale który działa pięknie. Jedyne wady, jakie widzę, to:

  • wygenerowany CSS znajduje się w tym samym folderze co SCSS, więc musiałem trochę poruszyć w mojej witrynie, aby to uwzględnić; i
  • wygenerowany CSS jest zminimalizowany, o ile widzę

Po zainstalowaniu dodatku (używam VS 2017), możesz przejść do menu Narzędzia> Opcje, aby zmienić ustawienia:

wprowadź opis obrazu tutaj

Mam nadzieję, że mogę teraz wznowić pracę! Nawiasem mówiąc, dzięki wszystkim autorom dodatków - nie chcę narzekać.

Andy Brown
źródło
1
Dobrze, że tym razem przewinąłem całą drogę. Właśnie miałem śledzić twoje poprzednie. odpowiedź. Może powinieneś zaktualizować go notatką, jeśli uważasz, że odpowiedź już nie działa. :)
radbyx
Działał jak urok. Wielkie dzięki.
radbyx
1
Jeśli masz już kompilator sieciowy i napotykasz te same błędy opisane w tym poście, zobacz moje posty tutaj: stackoverflow.com/a/55290276/3609362 github.com/madskristensen/WebCompiler/issues/ ...
Matt G
Właśnie pobrałem Web Compiler for Visual Studio 2019 i jak na razie działa doskonale. Czy są jakieś problemy specyficzne dla programu Visual Studio 2017?
Andy Brown
2

Jest teraz również mniej szczegółowy kompilator. https://github.com/madskristensen/LessCompiler

Justin
źródło
Pobrałem i zainstalowałem rozszerzenie. Następnie otworzyłem mój plik Site.less i mogę zobaczyć, gdzie jest znak wodny, aby dostroić kompilator. Następnie utworzyłem kompilację w mojej witrynie, a także otworzyłem ją w trybie debugowania. Kiedy otwieram mój Site.css, który znajduje się pod Site.less, ma na sobie wygenerowany znak wodny. Następnie próbuję wyszukać nowo dodaną właściwość, ale jej tam nie ma i nie otrzymuję kodu CSS. Jakieś pomysły, jak mogę to zrobić, aby zbudować mój LESS?
Caverman