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



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

791   5  

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.

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

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

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

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

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

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

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

компиляция на Строй

  1. щелкните правой кнопкой мыши compilerconfig.файл JSON
  2. веб-компилятор - > нажмите Включить компиляции на построение
  3. при нажатии на пункт меню вам будет предложено ввести информацию о том, что пакет 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. Это легкий и делает работу очень хорошо с большой отчет об ошибках. Читайте блог автора о расширении здесь.

скачать Compile SASS


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

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

Скачать Web WorkBench

большинство шагов в ответ на этот вопрос идентичны шагам, которые были даны "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

    Ничего не найдено.