错误 get-function rgba-css-var is not a valid value for background-color

Question

I have followed the following steps to set up Bootstrap 5 SASS in the ASPNET Core project.

1. right-click wwwroot and select Add->Client-Side Library . Selectected unpkg provider, bootstrap@5.1.3 library.
2. Created a file called main.scss
3. Imported following from bootsrap in main.scss

The content of the main.scss are:

@import "../lib/bootstrap/scss/bootstrap";

4. right-click the main.scss file and select Web Compiler->Compile file, the file is compiled successfully, and main.min.css and main.css are generated
5. Modified _Layout.cshtml by adding <link href="~/css/main.css" rel="stylesheet" />

While loading the pages, the CSS is not generated properly. bg-dark or bg-light shows the invalid values in background-color .

Also in the visual studio there a 75 warnings from this same file main.css .

Answer 1

I refer to the steps mentioned in this answer and found that with a few changes it started working.

Note: I am using Visual Studio 2022 and I have created an Asp.Net core project with the .net core 6.0 version.

Below are the steps to make it work.

1. After creating the project, I deleted the files in /wwwroot/lib/bootstrap folder.
2. Right-click the WWWroot folder. Click on Add-> Clientside library option.
3. Search for bootstrap and select choose specific files option. Then check the SCSS folder. Modify the Target location as below.

4. Browse thru wwwroot/lib/bootstrap/scss and create a file named bootstrap-custom.scss .

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

5. Installed the extension below and restart the Visual Studio.

6. Browse thru wwwroot/lib/bootstrap/scss location and right click the file bootstrap-custom.scss . Select Web compiler -> Compile file option.

7. It will create a bootstrap-custom.css and bootstrap-custom.min.css files on the same location. Copy both files to the wwwroot/css folder.

8. Go to the _Layout.cshtml file and add a reference to the bootstrap-custom.css . Also, add comments to the lines below.

Note It's up to you, where you keep the compiled CSS files. You just need to make sure you are passing the correct path in the layout file.

 @*<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />*@ <link href="~/lib/bootstrap/scss/bootstrap-custom.css" rel="stylesheet" /> @*<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>*@

9. Run the project.

Output:

Note: You may need to make some changes according to your environment to make it work on your side.

Answer 2

I was experiencing the same issue. Turned out to be the SASS Compiler I was using. I'm running a .NET MVC C# Web App, and had installed this VS extension with VS 2019. After discovering the error that was generated with bg-primary I started googling the cause. I found the answer in this thread, and switched to using the newer SASS Compiler found here . After compiling the SASS again with the new compiler (which was developed by the same person "Mad Kristensen") the problem was resolved.

So if you're using the same compiler try switching to the newer version. You might be able to use the compiler stated in @Deepak-MSFT answer but I haven't tried that one.