Scoped CSS is not auto-generated in Blazor after changing environment

Question

ASP Core 5.0 and VS 2019 Preview 16.9 have CSS scopes feature similar to popular JS frameworks, like Angular. After creating new project, Host.html contains auto-generated CSS.

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

• When environment is set to Development, everything works fine
• Then, I create appsettings.Live.json and set environment to Live, CSS is not generated and HTTP request trying to load this CSS shows 404 Not Found

What am I missing?

Answer 1

So it appears that the static web assets are only generated in Development mode

I amended the CreateHostBuilder method in Program.cs accordingly:

webBuilder.UseStaticWebAssets().UseStartup<Startup>();

This appears to fix it.

The environments Production and Staging don't seem to need this when the app is published

Answer 2

Adding to @Quango's answer for .NET 6.

Add this line to Program.cs before you build the app:

builder.WebHost.UseStaticWebAssets();
// Add this: ☝
var app = builder.Build();