In .NET 8, scoped CSS from referenced Microsoft.NET.Sdk.BlazorWebAssembly project isn't included

[SteveSandersonMS]

Repro

• Create a new project using the updated project template in https://github.com/dotnet/aspnetcore/pull/49801 via dotnet new blazor --use-wasm.
• In the Client project, add a new file Pages/Counter.razor.css containing h1 { color: red; }
• Run it

Expected: On the counter page, the title is red.

Actual: It's black

Alternatively, the same issue will probably occur if you use the Preview 7 project template and manually add an RCL, change the SDK to BlazorWebAssembly, and try to use one of its components with scoped CSS (but I didn't check that).

Investigation

Looking at MyBlazorApp.Styles.css, I can see it does not have any line that does @import '_content/MyBlazorApp.Client/MyBlazorApp.Client.bundle.scp.css';, so it's clearly not trying to load the scoped styles from the referenced project.

This definitely seems specific to when the referenced project uses Sdk="Microsoft.NET.Sdk.BlazorWebAssembly". If I change that to Sdk="Microsoft.NET.Sdk.Razor", then it does successfully reference and load the scoped CSS from it.

Impact

This breaks scoped CSS in any component that is shared with WebAssembly (or completely breaks scoped CSS for WebAssembly-everywhere hosted projects).

cc @javiercn - any ideas?

[javiercn]

@SteveSandersonMS can you capture a binlog?

It's weird because we have tests for this in the SDK, so I would have expected those to break.

[SteveSandersonMS]

Yes, sending the binlog to you separately.

[SteveSandersonMS]

I checked with @javiercn and this isn't a bug. It's a configurable option. In the updated template, I've added the necessary flag to the csproj so that it works: https://github.com/dotnet/aspnetcore/blob/main/src/ProjectTemplates/Web.ProjectTemplates/BlazorWeb-CSharp.Client.csproj.in#L8