5 ответов:
при использовании Gulp + Visual Studio 2015
- Сначала установите 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" }
- на 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']); })
теперь каждый раз, когда вы сохраняете scss css будет компилироваться и изменять файл sass.
Это также может быть достигнуто без глотка или хрюканье, просто нажав свой путь в Visual Studio.
Установить Веб-Компилятор
- в Visual Studio нажмите Инструменты -> Расширения и обновления.
- поиск веб-компилятора (созданного Мадсом Кристенсеном) и установка.
- потребуется перезапуск Visual Studio.
компилировать файлы
- щелкните правой кнопкой мыши .scss-файл в обозревателе решений для установки сборник.
- Нажмите Web Compiler - > Compile File (Shift+Alt+Q).
файл с именем compilerconfig.json создается в корне проекта, где можно изменить поведение компилятора. Щелкните правой кнопкой мыши compilerconfig.JSON-файл позволяет вам легко запускать все настроенные компиляторы.
в любое время a .scssfile изменяется в Visual Studio, компилятор запускается автоматически для создания скомпилированного выходного файла.
компиляция на Строй
- щелкните правой кнопкой мыши compilerconfig.файл JSON
- веб-компилятор - > нажмите Включить компиляции на построение
- при нажатии на пункт меню вам будет предложено ввести информацию о том, что пакет NuGet будет установлен в папку packages без добавления каких-либо файлов в сам проект. Пакет NuGet содержит задачу MSBuild, которая будет запускать точно такие же компиляторы на compilerconfig.json-файл в корне проекта.
расширение веб-компилятора для VS2015
глоток. npm install-g gulpнадеюсь, что это помогает... несколько меньше обручей.
Edit:
Я столкнулся с проблемой с веб-компилятором, преобразующим строки в символы Юникода, когда он не должен был этого делать. Я переключился на эту реализацию http://blog.oxfordcc.co.uk/compiling-sass-gulp-visual-studio/ в VS2015 и это компиляция В CSS правильно. Добавлено на всякий случай, если кто-то еще столкнется с той же проблемой.
Если вы не хотите возиться с тонкостями настройки компиляции вручную, есть ряд удивительно простых расширений, которые могут справиться с этим для вас:
WebCompiler (бесплатно)
Это уже упоминалось, но Мадс Кристенсен (автор web essentials) создал автономный инструмент компиляции под названием Веб-Компилятор. Все, что вам нужно сделать, это установить его, а затем щелкните правой кнопкой мыши на любом из файлов SASS, которые вы хотите скомпилируйте и выберите веб-компилятор > скомпилировать файл. С этого момента он просматривается и в любое время он сохраняется, файл будет скомпилирован.
CompileSASS (бесплатно)
подобно веб-компилятору это автономное расширение, которое было создано для работы в обоих VS2013 и VS2015 потому что компиляция была удалена из популярного расширения Web Essentials. Это легкий и делает работу очень хорошо с большой отчет об ошибках. Читайте блог автора о расширении здесь.
Web Workbench (бесплатно / платно)
веб-верстак Mindscape был моим любимым расширением в течение многих лет при компиляции SASS, но с тех пор я отошел в пользу свободных альтернатив. Тем не менее, Pro версия является мощным инструментом со многими способы настройки выводимых файлов, но это также довольно дорого ($39), учитывая, что там есть бесплатные инструменты.
большинство шагов в ответ на этот вопрос идентичны шагам, которые были даны "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" (в разделе "задачи") каждый раз, когда проект запускается, чтобы получить часы, но затем он работает на последующих сейвах.
Comments