Blazor Web Assembly CSS isolation doesn't work

Question

I migrated my Blazor WASM app to .NET 8, and I realised that CSS is not working if I use it in {component}.razor.css.

I mean

File Component.razor:

<div class="collapse navbar-collapse" id="navbarResponsive">
    <ul class="navbar-nav">
        <li class="nav-item"><a class="nav-link js-scroll-trigger" href="@AllResourcesResolver["navbar_inicio"]"> @AllResourcesResolver["navbar_inicio"] </a></li>
    </ul>
</div>

<style>
    .navbar-dark .navbar-nav .nav-link {
        color: white;
    }
</style>

This CSS works, but if I put the same CSS into {component}.razor.css, it doesn't work.

File Component.razor.css:

.navbar-dark .navbar-nav .nav-link {
    color: white;
}

Makes no sense to me, any help is welcome!

Answer 1

Do the "Visual Studio Dance":

• Delete the bin and obj folders for all projects
• Delete all *.csproj.user files for all projects
• Delete the .vs folder next to your Solution file

And then enjoy your Component isolation working again (spent hours on this).