I have a blazor page Page.razor and a css file for that page Page.razor.css. These files used to be in Components/Pages but I recently moved them into a subfolder of Pages. Now blazor generates different css scopes in the css file than for the html elements. (This only happens when the app is hosted on a server (azure web app in my case). It works fine while I'm running it locally)

This is what's in my HTML document after starting the app:

<div class="chat" b-o6nfzu7aoq>

And this is what's in the css file:

.chat[b-dzcshse1ta] {...}

I've tried rebuilding, checking wether the link to {AppName}.styles.css in App.razor exists and creating a new css file for the page.

I have a blazor page Page.razor and a css file for that page Page.razor.css. These files used to be in Components/Pages but I recently moved them into a subfolder of Pages. Now blazor generates different css scopes in the css file than for the html elements. (This only happens when the app is hosted on a server (azure web app in my case). It works fine while I'm running it locally)

This is what's in my HTML document after starting the app:

<div class="chat" b-o6nfzu7aoq>

And this is what's in the css file:

.chat[b-dzcshse1ta] {...}

I've tried rebuilding, checking wether the link to {AppName}.styles.css in App.razor exists and creating a new css file for the page.

• c#
• asp-core
• blazor

• 1 I am guessing your namespaces don't align. The .razor always generates code with the namespace of the folder unless you use the @namespace attribute. Other than try a clean & rebuild and clear your browsers cache. – Brian Parker Commented Nov 20, 2024 at 23:07
• @BrianParker I don't understand what you mean with the namespaces. I don't use the namespace attribute in that page and I've already tried cleaning and rebuilding the solution and clearing the browser cache which all didn't work. – Schlafhase Commented Nov 21, 2024 at 18:39

1 Answer 1

Now blazor generates different css scopes in the css file than for the html elements.

Using CSS isolation, within the bundled file, each component is associated with a scope identifier. For each styled component, an HTML attribute is appended with the format b-{STRING}, where the {STRING} placeholder is a ten-character string generated by the framework.

At build time, a project bundle is created with the convention obj/{CONFIGURATION}/{TARGET FRAMEWORK}/scopedcss/projectbundle/{ASSEMBLY NAME}.bundle.scp.css.

So, for your issue, you can try the following:

1. Delete the obj folder and Re-build the application.
2. Clear the browser cache.