Подтвердить что ты не робот

Как скомпилировать Twitter Bootstrap 3.0 МЕНЬШЕ, используя Asp.net MVC 5 и Web Essentials 2013

Я настроил Visual Studio 2013 RC и Web Essentials 2013. Я пытаюсь создать Azure Cloud Service и веб-роль, используя ASP.Net MVC 5. Установленный Twitter Bootstrap Less Source 3.0 и хотел объединить все меньше файлов с помощью веб-Essentials 2013.

Я не получал никакой помощи или документации о том, как идти о комплекте bootstrap.less во время выполнения или компилировать его в bootstrap.css во время разработки.

Любая идея, как это можно сделать? Есть ли более простой способ, чем BundleTransformer.Less.

4b9b3361

ОТВЕТЫ

Ответ 1

ОБНОВЛЕНИЕ (29-SEP-2015):

Оставьте веб-Essentials и используйте LESS Compiler вместе с его чистым плагином CSS.

  • Загрузите и установите Node.js (32-разрядная версия) для Windows.
  • Откройте командную строку node.js.
  • Установите LESS с помощью команды: npm install -g less
  • Установите less-plugin-clean-css с помощью команды: npm install -g less -plugin-чисто CSS
  • Перейдите в раздел "Свойства проекта" > "Создать события и скопировать-вставить" ниже команды "Предварительная сборка окна командной строки событий:
    lessc "$ (ProjectDir) Содержимое \bootstrap\bootstrap.less" "$ (ProjectDir) Содержимое \bootstrap.css" --clean-css = "- s1 --advanced"
  • Создайте проект и найдите bootstrap.css в указанном месте. (Если это еще не так, вам может потребоваться включить "Показать все файлы" в обозревателе решений.)
  • Включите файл bootstrap.css в ваш проект. Просмотрите свойства файла и установите для параметра "Действие сборки" значение "Содержимое". Обновите BundleConfig, чтобы включить этот скомпилированный файл в свой StyleBundle.
  • Выберите все .less файлы из папки \Content\bootstrap. Просмотрите свойства файла и установите для параметра "Действие сборки" значение "Нет".

ОБНОВЛЕНИЕ (24-SEP-2014):

Так как Twitter Boostrap переключился с RECESS на Grunt, я бы порекомендовал новым пользователям, которые искали это решение: LESS компилятор или Grunt.

Обратите внимание, что none из упомянутых здесь решений использует Web Essentials 2013.

Наконец, я решил использовать RECESS, рекомендованный Twitter. Если вы хотите использовать предварительно построенный загрузочный бутстрап 3 в css с помощью Visual Studio 2013 (RC/RTM), вы можете выполнить следующие шаги:

  • Загрузите и установите Node.js (32-разрядная версия) для Windows.
  • Установить пакет RECESS npm глобально - откройте командную строку node.js и запустите команду:
    npm install recess -g
  • Используйте диспетчер пакетов библиотеки NuGet и установите пакет Bootstrap Less Source 3.0.0 на ваш Asp.Net Проект MVC 5 Web/Azure Web Role.
  • Перейдите в раздел "Свойства проекта" > "Создать события и скопировать-вставить ниже" в командную строку "Предварительная сборка событий": окно:
    recess "$ (ProjectDir) Содержимое \bootstrap\bootstrap.less" --compress > "$ (ProjectDir) Содержимое \bootstrap-compiled.css"
  • Создайте проект и найдите bootstrap-compiled.css в указанном месте. (Если это еще не так, вам может потребоваться включить "Показать все файлы" в обозревателе решений.)
  • Включите файл bootstrap-compiled.css в ваш проект. Просмотрите свойства файла и установите для параметра "Действие сборки" значение "Содержимое". Обновите BundleConfig, чтобы включить этот скомпилированный файл в свой StyleBundle.
  • Выберите все .less файлы из папки \Content\bootstrap. Просмотрите свойства файла и установите для параметра "Действие сборки" значение "Нет".

Ответ 2

Можно использовать команду lessc 'с тем же подходом образец:

   lessc "$(ProjectDir)Content\bootstrap\bootstrap.less"  "$(ProjectDir)Content\bootstrap-compiled.css"