CSS Isolation is broken

[Atee134]

CSS isolation doesn't work with this template.
Creating a new Blazor application it works fine, but with this I just can't seem to make it work.

I have put this manually at the end of the index.html head:
<link href="ApplicationName.Client.styles.css" rel="stylesheet" />

Still when I start the page I get an error: 404 Application.Client.styles.css
It's not being generated anywhere in the project, however, in a new vanilla Blazor app I can find it in "obj\Debug\net5.0\scopedcss\bundle"

EDIT: Turns out the file is not there, because there is no component specific .css file.
Adding one results the file being created, and the 404 error going away, but still, the styles in it aren't applied at all

[mnbob70]

I used the template for the first time yesterday and also had this issue for a Blazor server app. I'm using Blazor for the first time so everything is new and it took me a while to figure out what was wrong. The template should put the following line in the head section of _Layout.cshtml file. The name has to change to $(MSBuildProjectName) if the user doesn't use the default MudBlazorTemplates1.
<link href="MudBlazorTemplates1.styles.css" rel="stylesheet">

[kencherasaro]

I just tried this as well. Still no luck. The file is ProjectName.styles.css is generated but the styles do not apply. Appears that that the html generated by the MudBlazor components do not contain the attributes for isolating as seen in the css generated below:

MudBlazorWasm

.foo[b-p438hivbfs] {
color: red;
}

I did though find that if styles are included in the .razor file, they will be used. This does allow for things like the following:

<style> .bar { color: @(@Colors.Blue.Accent1); } </style>

[ScarletKuro]

I haven't found problems with CSS isolation using MudBlazor, few things to keep in mind:

1. Add <link href="{ASSEMBLY NAME}.styles.css" rel="stylesheet">
2. Some declarations require usage of ::deep.
3. Sometimes you need to wrap components in div with the isolated css for the isolation to work.

Full MSFT documentation: https://learn.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation?view=aspnetcore-8.0#css-isolation-bundling