ASP.NET Core 6 MVC : CSS variable Issues

Question

I copied and pasted this CSS to codepen The Code.

When I used it for my ASP.NET Core 6 MVC app it doesn't work. If I don't use the variables and just colors it works just fine. Is there something I missed that does not allow CSS variables to work?

//the code
:root {
    --fb: rgb(16,148,244);
    --tw: rgb(93,168,221);
    --gg: rgb(234,67,53);
    --lin: rgb(10,102,194);
    --white: #ffffff;
    --fFamily: "Courier New", monospace;
}
button{
    font-family:var(--fFamily);
}
.fb-icon {
    color: var(--white);
    background-color: var(--fb);
}

    .fb-icon:hover {
        color: var(--fb);
        background-color: var(--white);
    }

.google-icon {
    color: var(--white);
    background: var(--gg);
}

    .google-icon:hover {
        color: var(--gg);
        background-color: var(--white);
    }

.twitter-icon {
    color: var(--white);
    background-color: var(--tw);
}

    .twitter-icon:hover {
        color: var(--tw);
        background-color: var(--white);
    }

.linkedin-icon {
    color: var(--white);
    background-color: var(--lin);
}

    .linkedin-icon:hover {
        color: var(--lin);
        background-color: var(--white);
    }

Zhi Lv · Accepted Answer · 2022-01-19 08:18:34Z

1

I create a new Asp.net 6 MVC application, and use the following code, it seems that no matter using or not using the CSS variables, the code works well on my side:

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://learn.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
    <button class="fb-icon"> Facebook </button>
    <button class="twitter-icon">  Twitter </button>
    <button class="google-icon"> Google </button>
    <button class="linkedin-icon"> LinkedIn </button>
</div>
<style>
    :root {
        --fb: rgb(16,148,244);
        --tw: rgb(93,168,221);
        --gg: rgb(234,67,53);
        --lin: rgb(10,102,194);
        --white: #ffffff;
        --height: 35px;
        --fFamily: "Courier New", monospace;
    }
    button{
        height:var(--height);
        font-weight: 700;
        font-family:var(--fFamily);
        font-size: large;
    }
    .fb-icon {
        color: var(--white);
        background-color: var(--fb);
    }

    .fb-icon:hover
    {
        color: var(--fb);
        background-color: var(--white);
    }

    .google-icon {
        color: var(--white);
        background: var(--gg);
    }

    .google-icon:hover
    {
        color: var(--gg);
        background-color: var(--white);
    }

    .twitter-icon {
        color: var(--white);
        background-color: var(--tw);
    }

    .twitter-icon:hover
    {
        color: var(--tw);
        background-color: var(--white);
    }

    .linkedin-icon {
        color: var(--white);
        background-color: var(--lin);
    }

    .linkedin-icon:hover
    {
        color: var(--lin);
        background-color: var(--white);
    }
</style>

@*without using css variables*@
@*<style>
    button{
       height:35px;
       font-weight: 700;
       font-family:"Courier New", monospace;
       font-size: large;
    }
    .fb-icon {
        color: #ffffff;
        background-color: rgb(16,148,244);
    }

    .fb-icon:hover {
        color: rgb(16,148,244);
        background-color: #ffffff;
    }

    .google-icon {
        color: #ffffff;
        background: rgb(234,67,53);
    }

    .google-icon:hover {
        color: rgb(234,67,53);
        background-color: #ffffff;
    }

    .twitter-icon {
        color: #ffffff;
        background-color: rgb(93,168,221);
    }

    .twitter-icon:hover {
        color: rgb(93,168,221);
        background-color: #ffffff;
    }

    .linkedin-icon {
        color: #ffffff;
        background-color: rgb(10,102,194);
    }

    .linkedin-icon:hover {
        color: rgb(10,102,194);
        background-color: #ffffff;
    } 
</style>
*@

The result as below:

When build your application, is there any warning or error? Whether you are using _layout or not. In my application, there is no warning and error and I'm using the _layout page. You can check it.

Besides, you can also copy the above code to your application and check it. If still not working, try to create a new MVC application and test the above code in the Index page.

Update:

As mentioned in the comments, I could reproduce the problem: if using the CSS isolation (add a css file with the same name as the view), the CSS variables not working. You could submit a feedback about this problem to Asp.net core Github.

As a temporary workaround, you can use the CSS isolation without CSS variables, Or if you want to use the CSS variables, you can add the CSS style in the site.css file (in the wwwroot/css folder) or add the CSS style in the <style> tag in the view page.

edited Jan 19, 2022 at 8:18

answered Jan 18, 2022 at 6:32

Zhi Lv

22.2k1 gold badge28 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

AlThePal78 Over a year ago

My CSS File is not inside a style css I use it in something like this login.cshtml login.cshtml.css It works with the rgb() but not with the :root{} variables

AlThePal78 Over a year ago

If I add a style tag it works. I was trying to put it in a css file with the same name as the view. As you can see I added the fact it works with regular colors but won't allow me to use the :root{} and variable attributes inside that css file. If I jsut make it regular colors vs using the variables it works just fine'

Zhi Lv Over a year ago

Hi @daddycardona, I could reproduce the problem: if using the CSS isolation (add a css file with the same name as the view), the CSS variables not working. You could submit a feedback about this problem to Asp.net core Github. As a temporary workaround, you can use the CSS isolation without CSS variables, Or if you want to use the CSS variables, you can add the CSS style in the site.css file (in the wwwroot/css folder) or add the CSS style in the <style> tag in the view page.

AlThePal78 Over a year ago

I was trying to see if it was just me because I knew that about doing it the other ways I was hoping it was just me LOL. Thank you so much I will submit the feedback and put my css in the root folder :)

Collectives™ on Stack Overflow

ASP.NET Core 6 MVC : CSS variable Issues

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related