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

Question

我已经安装Install-Package bootstrap.sass在 ASP .net core 3.1 中。

它已安装bootstrap.js和scss文件夹。但是如何编译 bootrap.scss 并在 _Layout 中使用它？

我试图从 scss 导入引导程序，但它给了我以下错误：

NuGet 已安装以下文件：

Answer 1

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

1. 删除/wwwroot/lib/bootstrap 文件夹：
   • 如果您的应用程序已经包含 Bootstrap，您将需要删除这些文件。
2. 选择scss 文件夹并单击安装：
   • You can right-click wwwroot and select Add->Client-Side Library. Select unpkg provider, "bootstrap@5.0.1" library.
   • [1
3. You can create a file called bootstrap.custom.scss for testing.
   • You can right-click the bootstrap.custom.scss file and select Web Compiler->Compile file.
     • If you cannot find the Web Compiler option, you need to click this link to install the Web Compiler tool, and then restart VS.
   • bootstrap.custom.scss

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

   • Modify the _Layout view

     • ... ...
       @*<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>*@
       ... ...
       

   • Result
     •