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.
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">
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 docs.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 (docs.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.
Yes, once or twice. Here is a link to it working in a project github.com/chrissainty/blazor-in-action/blob/main/chapter-03/…