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

Question

我已经安装了Install-Package bootstrap.sass在 ASP .net 核心 3.1 中。
已安装bootstrap.js和 scss文件夹。但是如何编译 bootrap.scss 并在 _Layout 中使用它呢？
我试图从 scss 导入 Bootstrap ，但它给了我错误:

NuGet 已安装以下文件:

Answer 1

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

删除/wwwroot/lib/bootstrap 文件夹 :

如果您的应用程序已经包含 Bootstrap，则需要删除这些文件。

选择 scss 文件夹 然后点击安装:

您可以右键 wwwroot 并选择 添加->客户端库 .选择 解包提供者，“ bootstrap@5.0.1 ”库。

[ 1

您可以创建一个名为 的文件。 bootstrap.custom.scss 用于检测。

您可以右键 bootstrap.custom.scss 文件并选择 Web 编译器-> 编译文件。

如果你 找不到 Web 编译器选项 , 你需要 click this link至安装 Web 编译器工具 ，然后是 重启 VS。

bootstrap.custom.scss

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

修改_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>*@
... ...

结果