Как скомпилировать.файлы sass при сохранении в Visual Studio 2015

Как можно получить полную среду предварительного компилятора sass (т. е. scss) в Visual Studio 2015? Это братский вопрос к это касается меньше.

63
asp.net gruntjs sass visual-studio-2015

5 ответов

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

  1. Сначала установите gulp-sass это пакет.файл 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"
      }
  1. на 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']);
   })
  1. теперь откройте "Task Runner Explorer" и дважды щелкните по задаче: "watch-sass" Task Runner Explorer

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

28

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

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

  1. в Visual Studio нажмите Инструменты -> Расширения и обновления.
  2. поиск веб-компилятора (созданного Mads Kristensen) и установка.
  3. потребуется перезапуск Visual Studio.

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

  1. щелкните правой кнопкой мыши .scss-файл в обозревателе решений для установки сборник.
  2. Нажмите Веб-Компилятор - > Файл Компиляции (Shift+Alt+Q).

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

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

Compile on Build

  1. щелкните правой кнопкой мыши compilerconfig.файл json
  2. нажмите веб-компилятор - > включить компиляцию при сборке
  3. щелчок по пункту меню предложит вам информацию о том, что пакет NuGet будет установлен в папку packages без добавления каких-либо файлов в сам проект. Пакет NuGet содержит задачу MSBuild, которая будет запускать те же компиляторы в compilerconfig.файл JSON в корне проекта.
100

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

глоток. npm install-g gulp

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

Edit:

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

9

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

WebCompiler (бесплатно)

Это уже упоминалось, но Мадс Кристенсен (автор web essentials) создал автономный инструмент компиляции под названием Веб-Компилятор. Все, что вам нужно сделать, это установить его, а затем щелкните правой кнопкой мыши на любом из файлов SASS, которые вы хотите скомпилируйте и выберите веб-компилятор > скомпилировать файл. С этого момента за ним наблюдают и в любое время он сохраняется, файл будет скомпилирован.

Скачать Веб-Компилятор

CompileSASS (бесплатно)

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

скачать Compile SASS

Web Workbench (бесплатно / платно)

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

Скачать Web WorkBench

6

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

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

щелкните правой кнопкой мыши решение - > добавить - > 'Grunt и Bower to Project' (затем подождите минуту для его установки)

пакета.в JSON:

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

(к вашему сведению: grunt-contrib-Sass link)

затем:

зависимости- > щелкните правой кнопкой мыши NPM - > восстановить Пакеты.

gruntfile.js

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

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

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

{ предостережение: я не эксперт по таким конфигурациям. Я нашел конфигурацию 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
        }
    }
}

теперь следуйте инструкциям для Task Runner Explorer, как указано в другом ответе. Обязательно закройте и снова откройте проект. Кажется, вам нужно запускать (двойной щелчок) "watch" (в разделе "задачи") каждый раз, когда проект запускается, чтобы получить часы, но затем он работает на последующих сейвах.

4