8

I created a Blazor component and an accompanying css file for the css isolation functionality in the WASM project. When the page is rendered, my element is not getting the css style defined in the css file. Upon inspecting the element, I can see the extra b-* attribute applied to it. I can see a MyProject.Client.styles.css file with the extra b-* added in the css file under ...\obj\Debug\net5.0\scopedcss\bundle\MyProject.Client.styles.css. (* is some random characters)

However, I expected that the Blazor build would add a link tag in the Head section so the browser loads this new bundled css file but it's not there. I used Fiddler and verified that no *.styles.css is being loaded by the browser, which is the problem. Already cleared the cache and application.

Am I missing some manual step or a setting for css isolation to add the link tag? I am using .NET 5.0 release version.

Improve this question
3
  • did you migrate your blazor app from .net core 3.1 to .net 5 ? Commented Nov 29, 2020 at 20:07
  • Yes. What's the difference? Commented Nov 29, 2020 at 20:57
  • I had this problem too . check this link they will fix this in next update Commented Nov 29, 2020 at 21:34

3 Answers 3

Reset to default
12

You have to add the tag for the bundled CSS file manually to the host page. Blazor does not add this for you.

<link href="MyProjectName.styles.css" rel="stylesheet">
Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

Which file? From which path? This page says Blaxor adds the link for me. daveabrock.com/2020/09/10/blazor-css-isolation. MS's page learn.microsoft.com/en-us/aspnet/core/blazor/components/… seems to indicate it's added for me. All I see is a MyProject.Client.styles.css deep inside a subfolder in the bin folder.
The link to the compiled style sheet is only added for you if you create a new .NET5 Blazor project. If you’re upgrading you have to add the link yourself.
The scoped css file you mentioned in your question. It’s also explained in the docs (learn.microsoft.com/en-us/aspnet/core/blazor/components/…). I have updated my answer with the file as well but for some reason it’s not showing yet.
The file does not exist. The browser gives a 404 error trying to load that css file. Did you actually try it or are you basing your answer on what you read? I already referenced the page you're referencing. I will try the link mohammadmahdi Talachi mentioned because the link there is actually using the path I mentioned.
I have noticed, that it's not the project name, but the assembly name <link href="{ASSEMBLY_NAME}.styles.css" rel="stylesheet">
|
10

I was facing very similar problem in my Blazor Server project based on .NET 6 where I leveraged the MudBlazor component library. I had to dive a little deeper than the accepted answer.

One of my pages required some tweaks for conditional background colors in a table and I was not able to have my classes from the isolated CSS file applied. After few hours of research on the internet and experimenting with shifting my custom CSS classes from the isolated CSS file to wwwroot\css\styles.css in my project folder structure and various placements of the stylesheet link for CSS isolation

<link href="<MyAssemblyName>.styles.css" rel="stylesheet"/>

it turned out that the CSS isolation applies only to plain HTML, not to Razor components, tag helpers etc. As stated in the MSDN documentation:

Important: Scoped CSS only applies to HTML elements and not to Razor components or Tag Helpers, including elements with a Tag Helper applied, such as <input asp-for="..." />.

The MudBlazor components surely are Razor components and therefore the scoped CSS feature is not supported. I had to keep my custom CSS classes in the wwwroot\css\styles.css stylesheet. With that I was able to achieve the look I needed on my pages/components.

In case you really need your scoped CSS applied you may try the workaround with the ::deep described here.

Improve this answer

Comments

1

Not exactly to your question, but I have similar issue, just share here, hope it help.

My project is blazor server app with VS2022, .Net8, it works fine in Dev and Prod Env. After some code refactor, I rename the project name from 'ProjectName' to 'ProjectNameNew'. It still works fine in Dev environment.

However, after I publish it to Prod env, the page displayed with "An unhandled error has occurred. Reload 🗙", the page loaded without any style/formatting.

Chrome's Network shows all file is downloaded, the 'ProjectNameNew.style.css' is also there.

After troubleshooting, find that the 'link tag' in the css file is different between Dev and Prod.

.page[b-sx9inz7k4q]

Then find there are two *.style.css file in the 'ProjectNameNew\obj\Debug\net8.0\scopedcss\bundle'

ProjectName.style.css
ProjectNameNew.style.css

Manually delete folder bin, and obj, rebuild the project, and publish it again to Prod env, all works fine.

Improve this answer

2 Comments

I has a same problem, and it resolved by your solution. Thank you.
Almost a year later....I had exactly the same issue after renaming a project and this solved the problem. Thank you for sharing.

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.