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?

I assume you mean _Host.cshtml? I created a Blazor server app for .NET 5 called Blazor50server, set up a live environment, changing the launchSettings.json to live and had the same result. I know it worked in earlier betas of 5.0 so not sure why this is — Quango
– Quango, Commented Nov 26, 2020 at 10:14
Oh, I checked on blazor issues page, but didn't see anything. Have logged this report: github.com/dotnet/aspnetcore/issues/28174 — Quango
– Quango, Commented Nov 26, 2020 at 10:33

Quango · Accepted Answer · 2020-11-26 12:12:00Z

15

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

answered Nov 26, 2020 at 12:12

Quango

13.7k7 gold badges51 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Quango Over a year ago

It is documented but it's easy to miss: learn.microsoft.com/th-th/aspnet/core/razor-pages/…

Ash K · Accepted Answer · 2022-09-20 16:27:54Z

14

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();

edited Sep 20, 2022 at 16:27

answered Sep 20, 2022 at 16:14

Ash K

4,0644 gold badges49 silver badges93 bronze badges

2 Comments

chobo2 Over a year ago

This still seems to be a problem in NET 8 blazor as well and this does work. I am wondering though if your code should be wrapped in the IsDevelopment() if statement? If not would it cause problems when you go to production and such?

CareTaker22 Mar 26 at 5:59

Thanks, this worked on .NET 9 as well.

Hakan Fıstık · Accepted Answer · 2024-10-25 17:22:37Z

0

If you are using CreateSlimBuilder method this is the reason, you have to change it to CreateBuilder

answered Oct 25, 2024 at 17:22

Hakan Fıstık

19.9k16 gold badges124 silver badges152 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related