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

Question

我已经在 ASP .net core 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并选择添加->客户端库。选择 unpkg 提供程序，“bootstrap@5.0.1”库。
   • [1
3. 您可以创建一个名为 bootstrap.custom.scss 的文件进行测试。
   • 您可以右键单击 bootstrap.custom.scss 文件并选择Web Compiler->Compile file。
     • 如果找不到Web Compiler选项，需要click this link安装Web Compiler工具，然后重启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>*@
       ... ...
       

   • 结果