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!

Other thing worked for me was reloading the page on browser (ctr+f5), somehow the styles where cached: — SolarOsQuiere
– SolarOsQuiere, Commented Jul 5, 2024 at 6:26

bytefish · Accepted Answer · 2024-08-12 12:10:15Z

6

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).

answered Aug 12, 2024 at 12:10

bytefish

3,8172 gold badges33 silver badges38 bronze badges

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

Comments

Ram Fattah · Accepted Answer · 2024-10-08 16:34:00Z

4

For me, I had to "Empty Cache and Hard Reload" in my browser and css started working again.

In Edge, I did the following:

Right click and cick Inspect to open "Developer Tools"
Right click on the refresh button to "Empty Cache and Hard Reload"

answered Oct 8, 2024 at 16:34

Ram Fattah

4382 silver badges13 bronze badges

Comments

Sane · Accepted Answer · 2024-06-29 04:13:18Z

my first post ever. I hope it helps!

I have a .NET 8 Blazor Web App (Server, Web Assembly, Auto). In my client project under the default Pages folder, I was running into the same issue as you when trying to apply CSS through a {Componenet}.razor.css file. I had set @rendermode InteractiveWebAssembly for this component page.

I've run into issues with IntelliSense not activating on razor files before and that corrupting the build compilation. I found my solution for this CSS isolation issue there. I noticed in my new {Componenet}.razor.css file the IntelliSense feature was not present even after using 'Ctrl + Space'. Usually, I just delete the file and remake it a couple of times to get it to work. However, that did not work for me this time.

My solution ended up being:

Delete the {Componenet}.razor.css file.
Run the application in Debug mode.
Navigate to the {Component}.razor page.
Add {Componenet}.razor.css in my Solution Explorer with its code.
Click the Hot Reload button in Visual Studio.

That's it. All of a sudden, my application is properly handling the CSS isolation in Blazor Web Assembly. I've even closed out Visual Studio entirely to verify that my solution persisted.

Collectives™ on Stack Overflow

Blazor Web Assembly CSS isolation doesn't work

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related