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
     •