Search code examples
cssrazorblazor

Blazor cannot find or is ignoring scoped CSS

I have created a Cart.razor.css file that is a child in the directory Cart.razor. As I understand, this is what is known as a scoped CSS file within Razor. I have read the Documentation here and as far as I can see the CSS (Cart.razor.css) file should be automatically included and be usable from within the parent (Cart.razor) file. However in my example it is not.

Here is an image of the file directory

The Problem here is that no matter what I do. The CSS contained within the scoped CSS file will not be executed.

Here is some of the Cart.razor file that displays the attempt to utilize the custom CSS. Notice "btn-delete".

<button class="btn-delete" @onclick="@(() => DeleteItem(item))">

Here is the some of the Cart.razor.css file.

.btn-delete{
    background: none;
    border: none;
    padding: 0px;
    color: red;
    font-size: 12px;
}

.btn-delete:hover{
    text-decoration: underline;
}

Here is an image of the result

As you can see the button is clearly not red or borderless.

My questions are:

  • Do I need to somehow include the CSS sheet within the razor file?
  • Does it have something to do with the fact that I'm using Rider not Visual Studio?
Solution

  • Check your index.html (for Webassembly) or _Host.cshtml (for Server) if you have added the stylesheet reference in the head section:

    <head>
...
    <link href="<applicationName>.Client.styles.css" rel="stylesheet" />
</head>

    this file will be composed with all yours CSS isolation files.

    After that, I've tested your code and the result is:
    Test Delete button

    Two other possible issue to check:

    1. in case you have upgraded the project, check your Project.Client.csproj and remove the line <RazorLangVersion>3.0</RazorLangVersion> from the <PropertyGroup>
    2. check if the ASPNETCORE_ENVIRONMENT system variable is set to Development