Как скомпилировать файлы less / sass в Visual Studio 2017

85

В VS <= 2015 мы можем использовать расширение WebEssentials, которое заботится о компиляции файлов less / sass для нас, но в настоящее время оно не поддерживает VS 2017. Известно ли вам о подобном расширении, которое может компилировать less / sass при сборке?

visual-studio sass less visual-studio-2017 css-preprocessor Михаил Шишков
источник

Ответы:

106

WebEssentials разделяется на несколько расширений. Я считаю, что нужная вам функциональность теперь есть в расширении веб-компилятора .

Если вы хотите сделать это без расширений, вы можете использовать средство запуска задач, например Gulp. См. Здесь пошаговое руководство по интеграции задач Gulp в VS.

Джимми
источник
Я использую веб-компилятор в качестве расширения в VS 2019, чтобы помочь скомпилировать некоторые очень старые файлы .less, и он все еще отлично работает.
klewis
1
ПРИМЕЧАНИЕ. Веб-компилятор заброшен, последнее обновление было 5 лет назад. Есть некоторые нерешенные проблемы, но вроде работает.
Alex
Веб-компилятор работал у меня в VS 2019, но он не перекомпилирует .less автоматически из коробки. Вы должны запустить компиляцию один раз вручную (см. Этот ответ ), чтобы был создан файл compilerconfig.json. После этого он автоматически перекомпилирует файлы .less.
neizan 07
49

ОБНОВЛЕНИЕ - ПОЖАЛУЙСТА, ПРОЧИТАЙТЕ ЭТУ СТРАНИЦУ, ТАК КАК Я ДОБАВИЛ ДОПОЛНИТЕЛЬНЫЙ ОТВЕТ (ЭТОТ ОДИН БОЛЬШЕ, КАЖЕТСЯ, НЕ РАБОТАЕТ ДЛЯ МЕНЯ).

Для тех, кто, как я, не знает Gulp, Grunt, Shriek или Wail и не хочет знать, вы МОЖЕТЕ заставить Visual Studio 2017 автоматически компилировать ваши файлы SCSS, как это было раньше в Visual Studio 2015. приведенные ниже шаги сработали для меня.

Сначала удалите все старые расширения / пакеты Nuget для веб-компилятора (я не знаю, нужно это или нет).

Перейдите на страницу загрузки галереи VSIX и выберите загрузку веб-компилятора.

введите описание изображения здесь

Обратите внимание, что я сделал это сначала, выбрав Инструменты / Расширения и обновления в Visual Studio. Хотя это, казалось, сработало, я обнаружил, что мои частичные файлы SCSS не компилируются автоматически в CSS, когда я вносил в них изменения (я был не единственным ).

Теперь вы должны иметь возможность щелкнуть правой кнопкой мыши свой главный файл SCSS и выбрать параметры, показанные ниже, которые должны автоматически создать файл с именем compilerconfig.json в корне вашего проекта (этот шаг, вероятно, не нужен, если у вас уже есть этот файл) :

введите описание изображения здесь

С этого момента все вроде работало нормально. Фух! Кстати, спасибо Мэдсу Кристенсену за это расширение - все, что угодно, только бы не узнать что-то новое ...

Энди Браун
источник
6
Я не понимаю этот комментарий! Не уверен, какой из принятых ответов, но ни один из них не похож на тот, который я дал.
Энди Браун
1
Принятый ответ - это тот, на котором стоит зеленая галочка. В настоящее время у него больше всего голосов, и он предлагает использовать то же расширение веб-компилятора. В любом случае мне нравится твой ответ из-за картинок.
Михаил Шишков
1
Благодарю. Мой ответ дает решение без использования Gulp / Grunt, а также дает дополнительные детали, которые понадобятся людям. Я посмотрел на отмеченный ответ (среди прочего), но он не решил мою проблему без дополнительной информации выше - поэтому я приложил усилия для публикации, просто чтобы другие не тратили то же время, которое я потратил, пытаясь решить эту проблему .
Энди Браун
1
попробуйте прочитать принятый ответ, он говорит то же самое, но также предлагает, как использовать Gulp
Кейт Николас
Хорошо, теперь я вижу, что принятый ответ действительно говорит то же самое, поэтому мой просто добавляет больше деталей. Надеюсь, такие ленивые читатели, как я, найдут это полезным!
Энди Браун
8

Простой ответ:

  • для компиляции файлов LESS и SASS: Web Compiler или Web Essentials 2017 (включая множество расширений)
  • для компиляции только полей SASS (SCss): CompileSass
  • для компиляции только LESS файлов: LESS Compiler
С.Серпушан
источник
5

Мой предыдущий ответ работал у меня несколько месяцев, но теперь больше не работает. Когда я пытаюсь скомпилировать, я получаю сообщение в окне ошибок о проблемах со схемой CompilerConfig и не могу решить эту проблему (ни поиск в Google, ни установка / удаление не помогли).

Таким образом, альтернативный ответ - использовать CompileSASS , который представляет собой гораздо более простую надстройку с (гораздо) меньшим количеством онлайн-документации, но которая прекрасно работает. Единственные недостатки, которые я вижу:

  • сгенерированный CSS находится в той же папке, что и SCSS, поэтому мне пришлось немного переместить элементы на моем веб-сайте, чтобы учесть это; и
  • сгенерированный CSS только минимизирован, насколько я могу видеть

После того, как вы установили надстройку (я использую VS 2017), вы можете перейти в Инструменты> Параметры, чтобы изменить настройки:

введите описание изображения здесь

Надеюсь, теперь я смогу возобновить работу! Кстати, спасибо всем авторам надстроек - не хочу ныть.

Энди Браун
источник
1
Хорошо, что на этот раз я пролистал до конца. Я как раз собирался следить за вашим пред. ответ. Возможно, вам стоит обновить его примечанием, если вы думаете, что ответ больше не работает. :)
radbyx
Работал как шарм. Большое спасибо.
radbyx
1
Если у вас уже есть веб-компилятор и вы сталкиваетесь с теми же ошибками, которые описаны в этом сообщении, см. Мои сообщения здесь: stackoverflow.com/a/55290276/3609362 github.com/madskristensen/WebCompiler/issues/…
Matt G,
Я только что загрузил веб-компилятор для Visual Studio 2019, и пока он работает отлично. Есть ли какие-либо проблемы, характерные для Visual Studio 2017?
Энди Браун
2

Теперь существует также менее специфичный компилятор. https://github.com/madskristensen/LessCompiler

Джастин
источник
Скачал и установил расширение. Затем я открыл свой файл Site.less и вижу, где находится водяной знак, чтобы настроить компилятор. Затем я выполнил сборку своего сайта и открыл его в режиме отладки. Когда я открываю свой Site.css, который находится под Site.less, на нем есть сгенерированный водяной знак. Затем я пытаюсь выполнить поиск нового добавленного свойства, но его нет, и я не получаю свой CSS. Любые идеи о том, как я могу получить его, чтобы построить МЕНЬШЕ?
Caverman