.Net 6 Blazor Server-Side CSS Isolation not working - css

Question

I created a new .NET 6 Blazor Server-side project and made a couple of changes. I have a couple of files using CSS isolation (like Contact.razor + Contact.razor.css).. In the _Layout.cshtml page the template added the following:
<link href="CustomerPortal.styles.css" rel="stylesheet" />
Where CustomerPortal is my Project Name. I can see the file is generated correctly under "CustomerPortal\CustomerPortal\obj\Debug\net6.0\scopedcss\projectbundle\CustomerPortal.bundle.scp.css" and "C:\Data\Git\WebApps\CustomerPortal\CustomerPortal\obj\Debug\net6.0\scopedcss\bundle\CustomerPortal.styles.css"
BUT when I run the project, both with Kernel or IIS Express, I get a 404 not found for the CSS, if I try to manually navigate to the CSS I also can't find it. Any ideas? My csproj doesn't have any flags that would affect it.

Answer 1

Edit:
There is a new extension as part of the minimal setup in .NET 7, and backported to newer versions of .NET 6 as well.
Both in .NET 7 and .NET 6 you can now do:
builder.WebHost.UseStaticWebAssets();
Old answer:
You've got a couple options here to resolve this depending on the approach you want to take. I think we've figured out why it's happening, but UseStaticWebAssets() seems to not be supported for the new minimal startup code. So, here's your options I can think of off the top of my head.
Migrate your code back to the "old" way of doing application startup. This is still a supported and completely valid approach as there's edge cases that aren't supported (like this one).
Pass a new WebApplicationOptions to the CreateBuilder() method and, depending on environment, look for the static files in a separate (and correct) location. See some examples here.
With the existing builder, check the environment and use the StaticWebAssetsLoader to load static web assets.
A complete example of #3
if (builder.Environment.IsEnvironment("Local"))
{
StaticWebAssetsLoader.UseStaticWebAssets(builder.Environment, builder.Configuration);
}
That being said - I'd imagine they'll plug this hole eventually and provide parity for UseStaticWebAssets(). You can see the progress of this effort in this open GitHub issue.

Answer 2

For anyone else...
I had the exact same issue with a .net 6 blazor server app. For me it came down to the fact that I had changed the project name but the reference to {project}.styles.css in _Layout.cshtml was still pointing to the old project name.
Simply updating {project} here to the correct project name fixed my issue.

Answer 3

When I encountered this error, it was because I'd named my MVC project with a hyphen: htmx-spike.
When I generated the project from a template (dotnet new mvc -o htmx-spike), the tooling renamed the namespace to htmx_spike—with an underscore instead of a hyphen, because hyphens aren't allowed in C# identifiers—and used that modified name as the CSS filename in _Layout.cshtml.
However, it turns out that in this case the CSS location actually still corresponds with the project name, with the hyphen. So the auto-generated code is incorrect, and was causing the 404 to be returned:
Once I renamed the file in the link element to the correct name with the hyphen, everything was fine.

Answer 4

I had the same issue with a component I imported from another project. I solved it by closing all instances of Visual Studio, deleting the hidden folder [.vs] from the project folder, and then restarting the project in Visual Studio. On restart, Visual Studio recreated that folder and imported CSS file(s) were included.