Как настроить Bootstrap SASS/SCSS с помощью Visual Studio 2013?

Bootstrap уже настроен с новым проектом ASP.NET из шаблона по умолчанию, но я бы хотел использовать SASS-версию Bootstrap, поэтому я могу настроить его, например, изменять переменные шрифта.

Как мне настроить это? Нужны ли мне инструменты типа npm, Bower и Grunt? Я немного теряюсь.

Ответы

Ответ 1

Это на самом деле довольно просто, пока вы используете Visual Studio 2013 Update 2+ и (я думаю, его нужно, не уверен). Надстройка Super Essentials от Mads Kristensen.

Сначала обновите пакет Bootstrap NuGet, чтобы он соответствовал, насколько это возможно, версии, доступной в официальном порту загрузки Bootpage SASS (они изначально записывали его в LESS и порт в SASS).

На момент написания статьи NuGet на 3.3.2, а порт SASS - на 3.3.3, хотя tarball говорит иначе.

Здесь SASS порт на GitHub:

https://github.com/twbs/bootstrap-sass

Затем удалите из проекта следующие файлы:

  • \Content\bootstrap.css
  • \Content\bootstrap.min.css

Затем загрузите "tar ball" zip из GitHub выше и распакуйте его где-нибудь. Вам понадобятся только файлы SCSS, поэтому откройте следующую папку:

bootstrap-sass-3.3.2.tar\bootstrap-sass-3.3.2\bootstrap-sass-3.3.2\assets\stylesheets

Скопируйте подпапку bootstrap и вставьте ее в папку проекта \Content.

Теперь добавьте новый элемент в папку \Content в Visual Studio и выберите "Таблица стилей SCSS (SASS)" и назовите его bootstrap.scss

Важно добавить новый элемент, так как он включает в себя элементы автоматического генерации, если вы просто добавляете существующий файл .scss, он не генерирует/не компилирует CSS.

Откройте новый bootstrap.scss файл и очистите его от любого кода по умолчанию.

Теперь вернитесь в свою распакованную папку и откройте файл _bootstrap.scss в блокноте, а затем скопируйте содержимое и вставьте его в файл bootstrap.scss в Visual Studio.

Сохраните файл, и он скомпилирует bootstrap.css! Он также создаст файл .map, который используется редакторами (например, инструменты браузера Chrome для браузера), чтобы сопоставить генный CSS с его оригинальной разметкой SASSY. Clever.

Щелкните правой кнопкой мыши файл .css, чтобы его минимизировать, и выберите вариант автоматического изменения изменений.

Так как вы теперь обновили те же файлы, что и были там, ваши пакеты будут работать, и сайт будет выглядеть как раньше.

Ох и отредактировать переменные, например, шрифты, см.:

\Content\bootstrap\_variables.scss

Ответ 2

Ниже приведены шаги для ASP.NET Core 2.0 MVC в Visual Studio 2017.

  • Выполнить dotnet new mvc
  • Выполнить git clone https://github.com/twbs/bootstrap-sass
  • Очистить содержимое wwwroot\lib\bootstrap\dist\js\bootstrap.min.js
  • Замените содержимое wwwroot\lib\bootstrap\dist\js\bootstrap.js на GitHub\bootstrap-sass\assets\javascripts\bootstrap.js
  • В VS Solution Explorer создайте новую папку wwwroot\lib\bootstrap\dist\js\bootstrap, а затем скопируйте .js файлы из GitHub\bootstrap-sass\assets\javascripts\bootstrap в нее.
  • Скопировать GitHub\bootstrap-sass\assets\stylesheets\_bootstrap.scss в wwwroot\lib\bootstrap\dist\css
  • Скопируйте (перетащите) всю папку GitHub\bootstrap-sass\assets\stylesheets\bootstrap в wwwroot\lib\bootstrap\dist\css
  • Вам нужно скомпилировать SASS, чтобы у вас было два варианта: во-первых, предполагается, что вы используете полную среду Visual Studio для работы над вашим проектом, а второй вариант - позволить Visual Studio и VSCode. Вам также нужно будет рассмотреть ситуацию для конвейера CICD.
  • Я думаю, что настройка VSCode и CICD потребует использования runners задач в среде IDE через VS, VSCode и, возможно, шаг сборки.
  • Установка компилятора SASS включает Ruby on Windows и, похоже, "становится сложной"; Я не очень похож на стороннего/JavaScript-парня, а не на любителя Linux и предпочитаю производительность по сравнению с модным модным инструментом JavaScript, поэтому я собираюсь отказаться от поддержки VSCode и установить расширение Web Compiler VS от Mads Kristensen, которое подключается к MSBuild, поэтому должно быть хорошо для построения dotnet при работе в VSCode, я думаю, а также в CICD.
  • Установить веб-компилятор (https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebCompiler).
  • Щелкните правой кнопкой мыши wwwroot\lib\bootstrap\dist\css\_bootstrap.scss и выберите "Web Compiler" > "Скомпилировать файл" Примечание внешний вид Scss node в проводнике запуска задач и новый файл компилятораconfig.json, добавленный в вашу кодовую базу.
  • См. скомпилированные файлы; сконфигурируйте Git, чтобы игнорировать сокращенную версию.
  • Измените условный код в _Layout.cshtml, чтобы указать на мини-код _bootstrap.min.css, а не ссылку CDN.
  • Запустите приложение и проверьте его, просмотрите запросы в консоли собственного хоста в файле _bootstrap.css, и 200 OK вернется.
  • Это в основном это.
  • Зафиксируйте Git и начните вносить изменения в _variables.scss и т.д.

Ответ 3

Вот шаги, которые необходимо предпринять для установки Bootstrap 4.x с ASP.NET MVC с Visual Studio 2018. Я предполагаю, что вы уже обновили свой пакет Bootstrap NuGet и установили последнюю версию Web Essentials, как упомянуто в.

  1. Скачайте Bootstrap и распакуйте исходные файлы
  2. Удалите ВСЕ файлы Bootstrap CSS из вашего каталога /Content
  3. Переместите папку scss папку "/Content" вашего проекта.
  4. (Необязательно) Переименуйте /scss в /bootstrap
  5. Скомпилируйте bootstrap.scss
  6. Откройте AppStart/BundleCongig.cs
  7. Измените ~/Content/bootstrap.css чтобы он соответствовал пути к вашему файлу Bootstrap.

Ответ 4

Вот что я сделал [здесь, в июле 2019 года] в Visual Studio 2017;

Я установил "Авторы Bootstrap, Twitter Inc." версия bootstrap.sass(v4.3.1) прямо с сервера nuget.org. Затем я просмотрел всю информацию о том, какие именно файлы я хотел бы "скомпилировать" из .scss в .css и, наконец, нашел этот пост.

Ответ @SandroPaetzold казался немного.. чрезмерным/слегка запутанным [учитывая, насколько проще установить пакет с NuGet], поэтому я решил написать свой процесс на тот случай, если он поможет всем, кто хочет использовать SASS-версию Bootstrap 4 в их проекте/решении ASP.Net MVC.

Я просто использую Mads K WebCompiler, поэтому мне пришлось создать файл compilerconfig.json [требуется для инструмента WebCompiler]. Для этого я смог скопировать его из другого проекта, который только что завершил, а затем внес изменения, необходимые для начальной загрузки, которая должна была просто скомпилировать файл bootstrap.scss в мою папку ~/Content. Таким образом, мне не нужно было трогать файл BundleConfig.cs.

(Теперь, по общему признанию, если бы у меня было больше, чем, скажем, 2-3 файла .css, я бы поместил их в нечто вроде ~/Content/css как я делал с этим другим проектом, который я упомянул, но я не сделал чувствую, что это был необходимый шаг в этом деле.)

Итак, весь мой compilerconfig.json был просто:

[
  {
    "outputFile": "Content/bootstrap.css",
    "inputFile": "Content/bootstrap/bootstrap.scss",
    "options": {
      "sourceMap": true
    }
  }
]

В этот момент я вошел в обозреватель задач, щелкнул правой кнопкой мыши на Content/bootstrap/bootstrap.scss (в левой панели), затем выбрал Before Build из контекстного меню Bindings.

Наконец, поскольку они создаются и, следовательно, на самом деле их не нужно .gitignore, я добавил Content/*.css .gitignore в мой файл .gitignore. (Примечание: ваш путь может отличаться.)

Это, на мой взгляд, наименьшее количество оттока для завершения этого процесса, по крайней мере, по сравнению с другими ответами. (Признавая, что некоторые, если не все из этих ответов имеют дело с другими/более ранними версиями Bootstrap, и, таким образом, могут потребовать немного дополнительной работы.)