Można to również osiągnąć bez łkania lub chrząkania, po prostu klikając swoją drogę w Visual Studio.

Install Web Compiler

1. w Visual Studio naciśnij Narzędzia - > Rozszerzenia i aktualizacje.
2. wyszukaj kompilator internetowy (stworzony przez Madsa Kristensena) i zainstaluj.
3. potrzebny będzie Restart Visual Studio.

Skompiluj Pliki

1. Kliknij prawym przyciskiem myszy .scss-file in Solution Explorer to setup compilation.
2. Naciśnij Web Compiler - > Skompiluj Plik (Shift + Alt + Q).

Plik o nazwie compilerconfig.json jest tworzony w katalogu głównym projektu, gdzie można modyfikować zachowanie kompilatora. Kliknięcie prawym przyciskiem myszy na compilerconfig.plik json pozwala na łatwe uruchamianie wszystkich skonfigurowanych kompilatorów.

Any time a .scssfile jest modyfikowany w Visual Studio, kompilator uruchamia się automatycznie, aby wyprodukować skompilowany plik wyjściowy.

Kompiluj na Build

1. Kliknij prawym przyciskiem myszy kompilator.plik json
2. Prasa Internetowa Compiler - > Enable compile on build
3. kliknięcie w menu wyświetli monit o informację, że pakiet NuGet zostanie zainstalowany w folderze packages bez dodawania plików do samego projektu. Pakiet NuGet zawiera zadanie MSBuild, które uruchomi dokładnie te same Kompilatory w compilerconfig.plik json w katalogu głównym projektu.

Rozszerzenie Web Compiler dla VS2015

Łyk jest wymagany. npm install-g gulp

Mam nadzieję, że to pomoże... kilka mniej obręczy.

Edit:

Napotkałem problem z kompilatorem internetowym konwertującym ciągi znaków na Unicode, gdy nie powinien tego robić. Przełączyłem się na tę implementację http://blog.oxfordcc.co.uk/compiling-sass-gulp-visual-studio / w VS2015 i poprawnie kompiluje CSS. Dodany na wszelki wypadek else napotyka ten sam problem.

Jeśli nie chcesz zadzierać z zawiłościami ręcznego konfigurowania kompilacji, dostępnych jest wiele zadziwiająco prostych rozszerzeń, które mogą obsłużyć to za Ciebie:

WebCompiler (FREE)

Już o tym wspomniano, ale Mads Kristensen (autor web essentials) stworzył samodzielne narzędzie kompilacyjne o nazwie Web Compiler. Wszystko, co musisz zrobić, to zainstalować go, a następnie kliknij prawym przyciskiem myszy dowolny z plików SASS, które chcesz skompilować i wybierz Web Kompilator > Skompiluj Plik. Od tego momentu jest on obserwowany i za każdym razem, gdy zostanie zapisany, plik zostanie skompilowany.

Pobierz Web Compiler

CompileSASS (FREE)

Podobnie jak Web Compiler jest to samodzielne rozszerzenie, które zostało stworzone do pracy zarówno w VS2013 i VS2015 ponieważ kompilacja została usunięta z popularnego rozszerzenia Web Essentials. Jest lekki i bardzo dobrze radzi sobie z doskonałym raportowaniem błędów. Przeczytaj blog autora o rozszerzeniu tutaj .

Pobierz kompilację Sass

Web Workbench (FREE/PAID)

Mindscape ' s Web Workbench był moim ulubionym rozszerzeniem przez wiele lat podczas kompilacji SASS, ale od tego czasu odeszłam na rzecz wolnych alternatyw. Mimo to wersja Pro jest potężnym narzędziem z wieloma sposobami dostosowywania wyjściowych plików, ale jest również dość droga ($39), biorąc pod uwagę, że istnieją darmowe narzędzia tam.

Pobierz Web WorkBench

Większość kroków w odpowiedzi na to pytanie jest identyczna z tymi, które podał "Maverick" w tym poście , które dotyczyły tego, jak zrobić to samo za mniej. Jednak ktoś nie pozwolił mi zmienić tego pytania, aby po prostu włączyć sass (co może było najlepsze, Nie wiem). Tak więc następująca odpowiedź opiera się na krokach określonych przez Mavericka w powyższym poście, z tymi różnicami:

(Pre-step dla pustych projektów) Jeśli zacząłeś od pusty projekt, najpierw dodaj Grunt i altanę:

Kliknij prawym przyciskiem myszy rozwiązanie - > Dodaj - > 'Grunt i Bower do projektu' (następnie poczekaj chwilę, aż wszystko zainstaluje)

Paczka.json:

"devDependencies": {
    "grunt": "^0.4.5",
    "grunt-bower-task": "^0.4.0",
    "grunt-contrib-watch": "^0.6.1",
    "grunt-contrib-sass": "^0.9.2"
}

(FYI: grunt-contrib-Sass link )

Wtedy:

Zależności- > kliknij prawym przyciskiem myszy NPM - > Przywróć Pakiety.

gruntfile.js

1) Dodaj lub upewnij się, że te trzy linie są zarejestrowane w pobliżu dno (jako zadania NPM):

grunt.loadNpmTasks("grunt-bower-task");
grunt.loadNpmTasks("grunt-contrib-watch");
grunt.loadNpmTasks("grunt-contrib-sass");

2) znowu w gruntfile.js, dodaj konfiguracje init, coś takiego jak poniżej.

{Zastrzeżenie: nie jestem ekspertem w takich konfiguracjach. Znalazłem konfigurację sass na doskonałym blogu jakiś czas temu, że nie mogę zlokalizować w tej chwili, aby dać kredyt. Kluczem było to, że chciałem znaleźć wszystkie pliki w projekcie w określonym folderze (plus potomkowie). Poniżej (Uwaga "someSourceFolder/**/*.scss" i patrz ważne powiązane uwaga tutaj ). }

// ... after bower in grunt.initConfig ...
"default": {
    "files": [
        {
            "expand": true,
            "src": [ "someSourceFolder/**/*.scss" ],
            "dest": "wwwroot/coolbeans", // or "<%= src %>" for output to the same (source) folder
            "ext": ".css"
        }
    ]
},
"watch": {
    "sass": {
        "files": [ "someSourceFolder/**/*.scss" ],
        "tasks": [ "sass" ],
        "options": {
            "livereload": true
        }
    }
}

Teraz postępuj zgodnie z instrukcjami dla Task Runner Explorer, jak podano w drugiej odpowiedzi. Pamiętaj, aby zamknąć i ponownie otworzyć projekt. Wydaje się, że trzeba uruchomić (podwójne kliknięcie) 'watch' (pod 'zadania') za każdym razem, gdy projekt jest uruchamiany, aby uzyskać obserwację watch, ale potem działa na kolejnych zapisach.