如何在VisualStudio2019上使用Bootstrap5和Sass

html5 • • 问答

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

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

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

NuGet 已安装以下文件：

回答

您可以按照以下步骤使用 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
以上是如何在VisualStudio2019上使用Bootstrap5和Sass的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>