Ответ 1

При использовании Gulp + Visual Studio 2015

• Сначала установите gulp -sass это файл package.json

{
      "name": "ASP.NET",
      "version": "0.0.0",
      "devDependencies": {
        "gulp": "3.8.11",
        "gulp-concat": "2.5.2",
        "gulp-cssmin": "0.1.7",
        "gulp-uglify": "1.2.0",
        "rimraf": "2.2.8",
        "gulp-sass": "2.2.0"
      }

2. На gulpfile.js

   var sass = require("gulp-sass");
   var paths = {
     webroot: "./wwwroot/"
   }
   paths.scss = paths.webroot + "css/**/*.scss";
   gulp.task('sass', function() {
     gulp.src(paths.scss)
       .pipe(sass())
       .pipe(gulp.dest(paths.webroot + "css"));
   });
   gulp.task('watch-sass', function() {
     gulp.watch(paths.scss, ['sass']);
   })

3. Теперь откройте "Task Runner Explorer" и дважды щелкните по задаче: "watch-sass"

Теперь каждый раз, когда вы сохраняете scss, css будет компилировать и изменять sass файл.

Ответ 2

Это также может быть достигнуто без gulp или grunt, просто щелкнув свой путь в Visual Studio.

Установить веб-компилятор

• В Visual Studio нажмите Инструменты → Расширения и обновления.
• Найдите веб-компилятор (созданный Mads Kristensen) и установите.
• Необходим перезапуск Visual Studio.

Скомпилировать файлы

• Щелкните правой кнопкой мыши файл .scss в обозревателе решений, чтобы настроить компиляцию.
• Нажмите Web Compiler → Скомпилируйте файл (Shift + Alt + Q).

В корневом каталоге проекта создается файл с именем compilerconfig.json, в котором вы можете изменить поведение компилятора. Щелчок правой кнопкой мыши на файле compilerconfig.json позволяет легко запускать все сконфигурированные компиляторы.

В любое время, когда .scssfile изменяется в Visual Studio, компилятор запускается автоматически для создания скомпилированного выходного файла.

Компилировать при сборке

• Щелкните правой кнопкой мыши файл compilerconfig.json
• Нажмите веб-компилятор → Включить компиляцию при сборке
• Щелчок по элементу меню подскажет вам, что пакет NuGet будет установлен в папку пакетов без добавления каких-либо файлов в сам проект. Пакет NuGet содержит задачу MSBuild, которая будет запускать те же самые компиляторы в файле compilerconfig.json в корне проекта.

Ответ 3

Расширение веб-компилятора для VS2015

Gulp. npm install -g gulp

Надеюсь, это поможет... несколько меньше обручей.

Edit:

Я столкнулся с проблемой, когда веб-компилятор конвертировал строки в символы Unicode, когда это не должно было быть сделано. Я переключился на эту реализацию http://blog.oxfordcc.co.uk/compiling-sass-gulp-visual-studio/ в VS2015 и правильно скомпилировал CSS. Добавлен на случай, если кто-то другой столкнется с той же проблемой.

Ответ 4

Если вы не хотите вмешиваться в сложность настройки компиляции вручную, существует ряд удивительно простых расширений, которые могут справиться с этим для вас:

WebCompiler (БЕСПЛАТНО)

Уже упоминалось, но Mads Kristensen (автор веб-основ) создал автономный инструмент компиляции под названием Web Compiler. Все, что вам нужно сделать, это установить его, затем щелкнуть правой кнопкой мыши по любому из файлов SASS, которые вы хотите скомпилировать, и выбрать Web Compiler > Compile File. С этого момента он просматривается и в любое время сохраняется, файл будет скомпилирован.

Загрузить веб-компилятор

СкомпилироватьSASS (БЕСПЛАТНО)

Подобно Web Compiler это автономное расширение, которое было создано для работы как VS2013, так и VS2015, потому что компиляция была удалена из популярного расширения веб-Essentials. Он легкий и делает работу очень хорошо с отличной отчетностью об ошибках. Прочтите блог автора о расширении здесь.

Загрузить компиляцию SASS

Web Workbench (FREE/PAID)

Mindscape Web Workbench было моим любимым расширением в течение многих лет при компиляции SASS, но с тех пор я отошел в сторону бесплатных альтернатив. Тем не менее, версия Pro - это мощный инструмент с множеством способов настройки выведенных файлов, но он также довольно дорог (39 долларов США), поскольку есть бесплатные инструменты там.

Загрузить Web WorkBench

Ответ 5

Большинство шагов в ответ на этот вопрос идентичны шагам, которые были даны "Maverick" в этом сообщении, которые касались того, как сделать то же самое для Меньше. Тем не менее, кто-то не разрешил мне изменить этот вопрос, чтобы просто включить sass (что, возможно, было лучше, я не знаю). Таким образом, следующий ответ опирается на шаги, указанные Мавериком в этом сообщении выше, с этими отличиями:

(предварительный шаг для пустых проектов) Если вы начали с пустого проекта, сначала добавьте Grunt и Bower:

Решение правого клика → Добавить → 'Grunt and Bower to Project' (затем подождите минуту, чтобы установить его все)

package.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)

Тогда:

Зависимости → щелкните правой кнопкой мыши NPM → Восстановить пакеты.

gruntfile.js

1) Добавьте или убедитесь, что эти три строки зарегистрированы внизу (как задачи NPM):

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

2) Снова в файле gruntfile.js добавьте конфигурации init, что-то вроде следующего.

{Предостережение: Я не являюсь экспертом в таких конфигурациях. Некоторое время назад я нашел конфигурацию sass на отличном блоге, который я не могу найти в это время, чтобы дать кредит. Ключом я хотел найти все файлы в проекте в определенной папке (плюс потомки). Следующее делает это (обратите внимание "someSourceFolder/**/*.scss" и см. Важную связанную записку здесь). }

// ... 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
        }
    }
}

Теперь следуйте инструкциям для Проводника задач, как указано в другом ответе. Не забудьте закрыть и снова открыть проект. Кажется, вам нужно запускать (дважды щелкнуть) "смотреть" (в разделе "Задачи" ) каждый раз, когда проект запускается, чтобы смотреть часы, но затем он работает при последующих сэкономлениях.