如何在 Visual Studio 2019 上使用 Bootstrap 5 和 Sass

Question

我已經在 ASP .net 核心 3.1 中安裝了Install-Package bootstrap.sass 。

它已經安裝了bootstrap.js和scss文件夾。 但是如何編譯 bootrap.scss 並在 _Layout 中使用它呢？

我試圖從 scss 導入引導程序，但它給了我錯誤：

NuGet 已安裝以下文件：

Answer 1

您可以按照以下步驟使用 ASPNET Core設置 Bootstrap 5 SASS 。

1. 刪除/wwwroot/lib/bootstrap 文件夾：
   • 如果您的應用程序已經包含 Bootstrap，則需要刪除這些文件。
2. 選擇scss文件夾並點擊安裝：
   • 您可以右鍵單擊wwwroot和 select Add->Client-Side Library 。 Select unpkg提供程序，“ bootstrap@5.0.1 ”庫。
   • [ 1
3. 您可以創建一個名為bootstrap.custom.scss的文件進行測試。
   • 您可以右鍵單擊bootstrap.custom.scss文件和 select Web Compiler->Compile 文件。
     • 如果找不到 Web 編譯器選項，需要點擊此鏈接安裝 Web 編譯器工具，然后重啟VS。
   • bootstrap.custom.scss

     •  $primary: #00ffff; $white:white; @import "../lib/bootstrap/scss/bootstrap"; nav.navbar { background: linear-gradient($primary, $white) }

   • 修改 _Layout 視圖

     • ... ... @*<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />*@ <link href="~/css/bootstrap.custom.css" rel="stylesheet" />... ... @*<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>*@... ...

   • 結果
     •