How to use Bootstrap 5 & Sass on Visual Studio 2019

Question

I have installed Install-Package bootstrap.sass in ASP .net core 3.1.

It has installed bootstrap.js and scss folder. But how to compile the bootrap.scss and use that in the _Layout?

I tried to import the bootstrap from scss but it gives me the error as:

The NuGet has installed the following file:

Answer 1

You can follow the steps below to set up Bootstrap 5 SASS using ASPNET Core.

1. Delete the /wwwroot/lib/bootstrap folder :
   • If your application already contains Bootstrap, you will need to delete these files.
2. Choose the scss folder and click install:
   • 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
     •