В VS <= 2015 мы можем использовать расширение WebEssentials, которое заботится о компиляции файлов less / sass для нас, но в настоящее время оно не поддерживает VS 2017. Известно ли вам о подобном расширении, которое может компилировать less / sass при сборке?
Как скомпилировать файлы less / sass в Visual Studio 2017
Ответы:
WebEssentials разделяется на несколько расширений. Я считаю, что нужная вам функциональность теперь есть в расширении веб-компилятора .
Если вы хотите сделать это без расширений, вы можете использовать средство запуска задач, например Gulp. См. Здесь пошаговое руководство по интеграции задач Gulp в VS.
Я использую веб-компилятор в качестве расширения в VS 2019, чтобы помочь скомпилировать некоторые очень старые файлы .less, и он все еще отлично работает.
—
klewis
ПРИМЕЧАНИЕ. Веб-компилятор заброшен, последнее обновление было 5 лет назад. Есть некоторые нерешенные проблемы, но вроде работает.
—
Alex
Веб-компилятор работал у меня в VS 2019, но он не перекомпилирует .less автоматически из коробки. Вы должны запустить компиляцию один раз вручную (см. Этот ответ ), чтобы был создан файл compilerconfig.json. После этого он автоматически перекомпилирует файлы .less.
—
neizan 07
ОБНОВЛЕНИЕ - ПОЖАЛУЙСТА, ПРОЧИТАЙТЕ ЭТУ СТРАНИЦУ, ТАК КАК Я ДОБАВИЛ ДОПОЛНИТЕЛЬНЫЙ ОТВЕТ (ЭТОТ ОДИН БОЛЬШЕ, КАЖЕТСЯ, НЕ РАБОТАЕТ ДЛЯ МЕНЯ).
Для тех, кто, как я, не знает Gulp, Grunt, Shriek или Wail и не хочет знать, вы МОЖЕТЕ заставить Visual Studio 2017 автоматически компилировать ваши файлы SCSS, как это было раньше в Visual Studio 2015. приведенные ниже шаги сработали для меня.
Сначала удалите все старые расширения / пакеты Nuget для веб-компилятора (я не знаю, нужно это или нет).
Перейдите на страницу загрузки галереи VSIX и выберите загрузку веб-компилятора.
Обратите внимание, что я сделал это сначала, выбрав Инструменты / Расширения и обновления в Visual Studio. Хотя это, казалось, сработало, я обнаружил, что мои частичные файлы SCSS не компилируются автоматически в CSS, когда я вносил в них изменения (я был не единственным ).
Теперь вы должны иметь возможность щелкнуть правой кнопкой мыши свой главный файл SCSS и выбрать параметры, показанные ниже, которые должны автоматически создать файл с именем compilerconfig.json в корне вашего проекта (этот шаг, вероятно, не нужен, если у вас уже есть этот файл) :
С этого момента все вроде работало нормально. Фух! Кстати, спасибо Мэдсу Кристенсену за это расширение - все, что угодно, только бы не узнать что-то новое ...
Я не понимаю этот комментарий! Не уверен, какой из принятых ответов, но ни один из них не похож на тот, который я дал.
—
Энди Браун
Принятый ответ - это тот, на котором стоит зеленая галочка. В настоящее время у него больше всего голосов, и он предлагает использовать то же расширение веб-компилятора. В любом случае мне нравится твой ответ из-за картинок.
—
Михаил Шишков
Благодарю. Мой ответ дает решение без использования Gulp / Grunt, а также дает дополнительные детали, которые понадобятся людям. Я посмотрел на отмеченный ответ (среди прочего), но он не решил мою проблему без дополнительной информации выше - поэтому я приложил усилия для публикации, просто чтобы другие не тратили то же время, которое я потратил, пытаясь решить эту проблему .
—
Энди Браун
попробуйте прочитать принятый ответ, он говорит то же самое, но также предлагает, как использовать Gulp
—
Кейт Николас
Хорошо, теперь я вижу, что принятый ответ действительно говорит то же самое, поэтому мой просто добавляет больше деталей. Надеюсь, такие ленивые читатели, как я, найдут это полезным!
—
Энди Браун
Простой ответ:
- для компиляции файлов LESS и SASS: Web Compiler или Web Essentials 2017 (включая множество расширений)
- для компиляции только полей SASS (SCss): CompileSass
- для компиляции только LESS файлов: LESS Compiler
Мой предыдущий ответ работал у меня несколько месяцев, но теперь больше не работает. Когда я пытаюсь скомпилировать, я получаю сообщение в окне ошибок о проблемах со схемой CompilerConfig и не могу решить эту проблему (ни поиск в Google, ни установка / удаление не помогли).
Таким образом, альтернативный ответ - использовать CompileSASS , который представляет собой гораздо более простую надстройку с (гораздо) меньшим количеством онлайн-документации, но которая прекрасно работает. Единственные недостатки, которые я вижу:
- сгенерированный CSS находится в той же папке, что и SCSS, поэтому мне пришлось немного переместить элементы на моем веб-сайте, чтобы учесть это; и
- сгенерированный CSS только минимизирован, насколько я могу видеть
После того, как вы установили надстройку (я использую VS 2017), вы можете перейти в Инструменты> Параметры, чтобы изменить настройки:
Надеюсь, теперь я смогу возобновить работу! Кстати, спасибо всем авторам надстроек - не хочу ныть.
Хорошо, что на этот раз я пролистал до конца. Я как раз собирался следить за вашим пред. ответ. Возможно, вам стоит обновить его примечанием, если вы думаете, что ответ больше не работает. :)
—
radbyx
Работал как шарм. Большое спасибо.
—
radbyx
Если у вас уже есть веб-компилятор и вы сталкиваетесь с теми же ошибками, которые описаны в этом сообщении, см. Мои сообщения здесь: stackoverflow.com/a/55290276/3609362 github.com/madskristensen/WebCompiler/issues/…
—
Matt G,
Я только что загрузил веб-компилятор для Visual Studio 2019, и пока он работает отлично. Есть ли какие-либо проблемы, характерные для Visual Studio 2017?
—
Энди Браун
Теперь существует также менее специфичный компилятор. https://github.com/madskristensen/LessCompiler
Скачал и установил расширение. Затем я открыл свой файл Site.less и вижу, где находится водяной знак, чтобы настроить компилятор. Затем я выполнил сборку своего сайта и открыл его в режиме отладки. Когда я открываю свой Site.css, который находится под Site.less, на нем есть сгенерированный водяной знак. Затем я пытаюсь выполнить поиск нового добавленного свойства, но его нет, и я не получаю свой CSS. Любые идеи о том, как я могу получить его, чтобы построить МЕНЬШЕ?
—
Caverman