12

In a Blazor WebAssembly .NET Core hosted application, after changing the {PROJECT NAME}.Client project name to "{PROJECT NAME}.Admin" (changing the client project name), scope identifies for CSS isolation in the {PROJECT NAME}.Admin.styles.css file and rendered objects in the DOM are different.

What I did

I created a .NET core hosted Blazor WebAssembly application with authentication. Ran the application. Worked fine.

Then I changed the project name of {PROJECT NAME}. Client project to "{PROJECT NAME}.Admin". And changed basically everywhere there was "Client" to "Admin".

  • Everywhere the namespace was mentioned
  • The Client Folder in the project folder

Then I added the project references.

When I ran the project... This was the landing page.

The Issue

All the functionality works fine. All the components are rendered. But only Bootstrap styling is applied to the MainLayout and NavMenu components as they use CSS isolation. The isolated CSS files generated files scope identities aren't the same as what is rendered to the DOM.

Image of {PROJECT NAME}.Admin.styles.css file

Image of Rendered HTML

The page renders fine if I change the scope Identities manually. But it resets when I Run the application the next time.

I'm just playing around with Blazor. So I'm expecting a fix to this problem rather than some alternate method or workaround to do the styling. I'm new to online forums. Sorry for providing unnecessary information or providing less information. Please request any additional information needed.

Improve this question

6 Answers 6

Reset to default
14

Deleting the CSS isolated files and creating them again from the beginning made it work! How ever rebuilding the solution or cleaning the solution did not work. Still no clue of what was going on.

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

5 Comments

Where did you find those files? I am having the same problem. When built in release the scope for the css files changes but the HTML does not.
The files are under the razor file. For example if the page is "NavMenu.razor" there is a file "NavMenu.razor.css" file in the same directory deleting the file creating a new one and pasting the previous content did the magic for me. Make sure torename change the <link> of "{ProjectName}.Client.styles.css" to "{ProjectName}.Admin.styles.css" ("Admin" in my case) inside the index.html file. BTW, does it work in debug mode?
Holy shit, I had the same problem and file recreation is also helped for me! Thank you!
It was hard to believe that recreating the isolated CSS files would solve this problem, but it did. Thank you!!! So what is causing this? A bug in the dotnet publish command?
I just had this problem, and this worked perfectly, even when using AspNetCore.SassCompiler
9

What worked for me was deleting the obj and bin folders, besides renaming the link to the css file to {AssemblyName}.styles.css. Setting it to ProjectName does not work if it differs from AssemblyName.

This way it was not necessary for me to delete and recreate the specific css files. Note: I'm using Blazor Server with ASP.NET 5

Improve this answer

Comments

4

I spent many hours on the same issue. In my case it was sufficient to use "Clean" on the project (in Visual Studio: right click on the project, and select the "Clean" option).

It has the same effect as deleting the bin and obj folders as mentioned in another answer.

Improve this answer

Comments

3

I had the same issue. Rebuilding the solution fixed it for me. Possibly rebuilding just the relevant application would have been enough too.

Improve this answer

Comments

2

Another workaround (not a solution as it should already "just work") is mentioned under "Customize scope identifier format" in: https://learn.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation?view=aspnetcore-5.0 .

Basically add something like this to your csproj file:

<ItemGroup>
  <None Update="Pages/Example.razor.css" CssScope="my-custom-scope-identifier" />
</ItemGroup>

If you provide a specific scope identifier like this and ensure you clear your browser cache, it seems to force the scope identifier that gets bundled in the {AssemblyName}.styles.css to match what gets rendered in the html

Improve this answer

Comments

2

Same thing happened to me, and I trawled a lot of StackOverflow queries that suggested cleaning and rebuilding would sort it, which it didn't.

Then I realised that there must be something about the blazor compiler only rebuilding when it thinks the original sources have changed.

So I opened /Layout/NavMenu.razor.css and Layout/MainLayout.razor.css, added a blank line and saved them. Then the publish worked - it must have checked the modified-dates on these files and decided that it didn't need to regenerate the scoped versions. Changing that modified time caused it to re-transpile them.

Note that you might have other transpiled CSS files (likely native Blazor ones, rather than your own components) that you may need to touch to force than trans-compilation.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.