The background-color value specified for the get-function rgba-css-var is invalid and causing an error

I have completed the necessary steps to integrate Bootstrap 5 SASS into my ASPNET Core project.

  1. To begin, I right-clicked on the wwwroot directory and selected Add->Client-Side Library. From there, I chose the unpkg provider and added the 
    <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="80e2efeff4f3f4f2e1f0c0b5aeb1aeb3">[email protected]</a>
    library.
  2. Next, I created a new file named main.scss.
  3. I then imported certain elements from bootstrap into the main.scss file for configuration.

The contents of the main.scss file include:

@import "../lib/bootstrap/scss/bootstrap";
  1. After saving the main.scss file, I right-clicked it and selected Web Compiler->Compile. This action successfully compiled the file, resulting in the generation of both main.min.css and main.css.
  2. At this point, I updated the _Layout.cshtml file by adding 
    <link href="~/css/main.css" rel="stylesheet" />
    .

Despite these efforts, when loading the pages, the CSS appears to be malfunctioning. Specific classes like bg-dark or bg-light are displaying invalid values for the background-color.

https://i.sstatic.net/XnPeJ.png

Furthermore, within Visual Studio, there are a total of 75 warnings stemming from the same main.css file.

https://i.sstatic.net/H0Tjh.png

cssvisual-studio-2019bootstrap-5saasasp.net-core-5.0

Answer №1

After following the steps outlined in this particular answer, I made a few adjustments and successfully got it to work.

Please note: This was done using Visual Studio 2022, within an Asp.Net core project utilizing .net core version 6.0.

Here are the modified steps for achieving the desired outcome:

  1. Once the project was created, I cleared out the files within the /wwwroot/lib/bootstrap directory.
  2. By right-clicking on the WWWroot folder, I navigated to the Add-> Clientside library option.
  3. Locating and selecting bootstrap, I chose the choose specific files option. Subsequently, I checked the SCSS folder and adjusted the Target location accordingly.

https://i.sstatic.net/xOgVe.png

  1. Navigated to wwwroot/lib/bootstrap/scss and crafted a file named bootstrap-custom.scss.

$primary: #00ffff;
$white: white;
@import "~/lib/bootstrap";

nav.navbar {
    background: linear-gradient($primary, $white)
}

  1. Installed the recommended extension and restarted Visual Studio.

https://i.sstatic.net/2DTf2.png

  1. In the specified location of wwwroot/lib/bootstrap/scss, I right-clicked on the file bootstrap-custom.scss. Opting for Web compiler -> Compile file led to successful compilation.

https://i.sstatic.net/UQ2qk.png

  1. As a result, both bootstrap-custom.css and bootstrap-custom.min.css were generated in the same locale. These were then copied over to the wwwroot/css directory.

https://i.sstatic.net/8GYR3.png

  1. Additionally, modifications were made to the _Layout.cshtml file to include a reference to bootstrap-custom.css. Necessary comments were also added as reminders.

Note: The choice of where to store compiled CSS files is subjective. It is vital that the correct path is specified within 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>*@

  1. The project was executed.

Desired Output Achieved:

https://i.sstatic.net/qOHMI.png

Note: Adjustments may be necessary based on individual environments to replicate the success achieved here.

Answer №2

I encountered a similar problem and traced it back to the SASS Compiler I was utilizing. My project is a .NET MVC C# Web App, and I had integrated this VS extension with VS 2019. Upon encountering an error related to bg-primary, I conducted some research and stumbled upon the solution in this thread. I made the switch to the newer SASS Compiler available here. After recompiling the SASS using this updated compiler (which happened to be created by the same individual "Mad Kristensen"), the issue was resolved.

Therefore, if you are using the same compiler, consider upgrading to the latest version. While @Deepak-MSFT mentioned an alternative compiler in their answer, I personally have not tested it.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

jQuery conceal input field after it has been displayed

I've created an HTML form with two different sections for search purposes. The first section displays basic fields, and by clicking on "Advanced Search" (in my case, "Расширенный поиск"), additional fields are revealed. Everything work ...

javascriptjqueryhtmlcss

In Vue, it is not accurate to measure overflow

I am working on creating an overflow effect with tagging that fades out at the beginning to provide a subtle hint to users that there is more content. Here is what it currently looks like: https://i.stack.imgur.com/fXGBR.png To achieve this, I added a fa ...

javascripthtmlcssvue.js

What is the method for setting tabstops in XHTML?

Is there a way to create a tabstop in an xhtml webpage without using the "&nbsp;" method? I want to avoid putting a space between the ampersand and 'n'. Any suggestions? Edit: My initial post did not display the &nbsp;. I am looking for ...

htmlcssxhtml

Is it possible to insert a Font Awesome icon into the content property of a CSS file when utilizing the Font Awesome NPM package?

Is there a way to use Fontawesome without importing it into CSS when utilizing their npm package? ...

cssnode.jsreactjsnpmfont-awesome

Creating Flexible Divs with Gradient Background for Older Versions of Internet Explorer - IE8 and IE7

I'm attempting to achieve the following. https://i.stack.imgur.com/YYOZv.jpg The issue I am encountering is that the elements in row1 have a different gradient background compared to those in row2. Additionally, row1 is populated dynamically with c ...

csshtmlinternet-explorer-8internet-explorer-7

What causes the discrepancy in pixel size between these two web pages on the same device?

I am currently putting together a portfolio showcasing the projects I have worked on while learning to code. Each project page has a banner at the top, but I'm encountering an issue with one site (Jubilee Austen page) that is unresponsive. After usin ...

htmlcssresponsive-designpixel

What is the best way to align elements in relation to a central div container?

Is there a way to align two buttons in the center on the same line, and then position a selector to the right of those centered buttons? How can I achieve this arrangement? Essentially, how do you position an element in relation to a centered div? UPDATE: ...

htmlcsscentering

Can TypeScript be imported into HTML to set a color value or modify a color value from HTML using TypeScript?

I've been working on this code for a couple of days now. Utilizing Angular to develop a web application, I am trying to change the color of certain numbers when they reach a specific value. For example, if num > 45 then color = green, otherwise col ...

htmlcssangulartypescript

How to Perfectly Position Content with Bootstrap 3's Full Width Image Carousel

Here's my query: Is there a way to adjust the position of my content (such as text) inside the slider responsively? The text can be positioned anywhere within the Div Slider, for example, at 25% from the left and 50% from the top within the Image Di ...

htmltwitter-bootstrapcss

Eliminate specified image dimensions when utilizing the "clip:rect" property in CSS and HTML

When trying to resize an image using clip: rect() in HTML, I encountered a problem where the Inspect tool would display the original height and width of the image instead of the resized dimensions. My goal is to achieve the following: On a screen width of ...

htmlcss

Looking for assistance with the navbar notification icon?

My navbar notification button is causing a problem by resizing the navbar. example Below is the code snippet: .badge-notify{ background:red; position:relative; top: -20px; left: -35px; } <ul ...

htmlcssbuttonnotificationsnavbar

Issue with sticky navigation bar causing page content to shift

Any ideas on how to solve my issue with a sticky nav bar in Twitter Bootstrap? Whenever I scroll past a certain point, the navbar sticks but causes my content to jump. I want the content to stay in place without jumping. Here is my HTML code: <body> ...

jquerycsstwitter-bootstrap

Using HTML to showcase various prompt messages based on the screen resolution

For the button click event, when clicked on desktop screens it will show a prompt message saying 'Hi'. On the other hand, when clicked on mobile screens, the prompt message displayed will be "Hello". ...

javascriptangularjshtmltwitter-bootstrapcss

Utilizing Reactstrap to design a customized vertical login page and NavBar with a unique background and text color scheme

I am currently working on creating a login page for accessing the main site that features a NavBar. I am utilizing ReactStrap, but I am facing challenges in making the NavBar vertical instead of horizontal, as well as customizing the background, text color ...

javascriptcssreactjsbootstrap-4reactstrap

JavaScript snap.js button

I'm looking to implement a Toggle button with snap.js from the following source: https://github.com/jakiestfu/Snap.js. The usage instructions on the website are quite concise and I'm struggling to grasp them. Below is the code I've put toget ...

javascriptjqueryhtmlcss

Creating an unconventional design utilizing ul and li elements with varied heights

Can I create the layout below using ul/li elements without any unusual tricks? All the elements in red should have the same width. Why do I want to use ul/li elements? Throughout the page, there are ul/li elements with a very similar layout, where all i ...

htmlcss

Two-column list using XSLT

I am seeking assistance with xsl transformation. The xml generated by SharePoint Server control is as follows: <rows> <row>A</row> <row>B</row> <row>C</row> <row>D</row> <row>E ...

jqueryhtmlcssxmlxslt

Place the sorting image on the left side of the DataTable header

I am currently using DataTable in my code. The sorting images in the header of the table are on the right side while the labels are on the left, as shown below: https://i.sstatic.net/Bz6EO.jpg However, I would like to switch this arrangement and have the ...

jqueryhtmlcssdatatables

Removing the active class from a Bootstrap menu can be achieved by targeting the specific

I have successfully implemented a Bootstrap Menu by placing it in a separate header.html file and using the php include function to call that file on every page of my website. However, I am now trying to figure out how to dynamically change the active cl ...

htmlcss

Placing an image at the forefront of all elements

Recently, I created a horizontal opt-in bar for my Newsletter on my website. Instead of the traditional submit button, I decided to use an image by incorporating some CSS: #mc_embed_signup input.button { background: url(http://urltotheimg.com/image.jpg); ...

htmlcssforms