Building a BlazorWasm Projekt for hosting in a subpath will generate the wrong path in <ProjectName>.styles.css

[paule96]

Is there an existing issue for this?

• [x] I have searched the existing issues

Describe the bug

Note: This issue was first described here

🐛 Bug Report

If you try to host your blazor application in a subfolder and follow this guide it will generate a wrong <ProjectName>.styles.css file.

Note: To get a <ProjectName>.styles.css generated you need at least one file scopde css file.

What is wrong in the file?

The wrong part in the file is the reference to the fluentui css file. It will be generated like that:

@import '../_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.g0t05e93zu.bundle.scp.css';

The problem here are the leading ../. The correct URL would be:

@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.g0t05e93zu.bundle.scp.css';

💻 Repro or Code Sample

I created a reprodution sample that contains the following:

• Aspire App Host (should be used to start the project)
• A Proxy Project based on YARP.
  • in Debug Configuration it will redirect the request the arrive at https://proxy/blazorapp1 to the blazor development server
  • in Release Configuration it will serve all the files for the blazor app from it's own wwwroot folder
    • The content of the wwwroot folder are the published files from the blazor app (look into the csproj of proxy if you want to know more)
    • After running the release build manually cleanup the wwwroot folder of the proxy before building again
• a Blazor WebAssembly sample app
  • has a reference to the ui lib fluentUI

https://github.com/paule96/BlazorFluentUISubpathBug/tree/master

1. Open the solution and build it in the debug or release configuration. (both should work)
   • The release configuration can take some while to build because of trimming
2. Start the project (CTRL+F5)
3. The aspire dashboard should open itself in a browser
4. click the URL next to proxy in the Aspire Dashboard
5. Hit F12 to open the browser development tools
6. Go to source and open the folder blazorapp1
7. Open the file BlazorApp1.styles.css
8. First line should be red with the error message: Failed to load resource: the server responded with a status of 404 ()

🤔 Expected Behavior

In the file BlazorApp1.styles.css the first line should be:

@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.g0t05e93zu.bundle.scp.css';

😯 Current Behavior

In the file BlazorApp1.styles.css the first line is:

@import '../_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.g0t05e93zu.bundle.scp.css';

💁 Possible Solution

🔦 Context

The issue currently makes it impossible to use fluentui on a reverse proxy that uses subpath hosting

🌍 Your Environment

• OS & Device: Windows 11
• Browser shoudl be an browser (I use Edge)
• .NET and Fluent UI Blazor library Version 9.0.300 and 4.11.9

Expected Behavior

No response

Steps To Reproduce

No response

Exceptions (if any)

No response

.NET Version

No response

Anything else?

No response

[javiercn]

@paule96 thanks for contacting us.

You likely don't need https://github.com/paule96/BlazorFluentUISubpathBug/blob/master/BlazorApp1/BlazorApp1.csproj#L9 when hosting behind yarp.

Getting this right is a bit tricky. But essentially, if you want to host "everything" under a sub path, you don't have to change anything on the wasm project. Instead, you need to setup the host so that all the files are served from under subpath and update the base element on the page accordingly.

You might need to call UsePathBase at some point to alter the BasePath on the pipeline.

[paule96]

@javiercn thank you for the tip. Sadly the problem stays the same. (I updated the sample like you recommended) Issue stays the same.

Also, can you explain a bit more when and when not to use StaticWebAssetBasePath. Because in the documentation for subpath,s it's explicitly mentioned to set it.

[javiercn]

@paule96 your case it's not exactly the same as the docs mention I believe.

You are hosting behind yarp, which is not the same as hosting inside a subpath like the docs mention.

Your case is similar to as if you were deploying to a host under /subpath. You need to change the <base and make sure that everything you need is served from under /subpath.

[paule96]

After relook at the project again and find out what I did wrong it works now.

The problem is in our real project there are multiple Blazor Wasm projects behind the reverse proxy. If I build them all alone it works. If I build the whole soltuion I get the following error:

C:\Program Files\dotnet\sdk\9.0.301\Sdks\Microsoft.NET.Sdk.StaticWebAssets\targets\Microsoft.NET.Sdk.StaticWebAssets.targets(616,5): error : Conflicting assets with the same target path '_framework/blazor.boot.json'. For assets 'Identity: ProjectA\bin\Release\net9.0\wwwroot\_framework\blazor.boot.json, SourceType: Project, SourceId: ProjectA, ContentRoot: ProjectA\bin\Release\net9.0\wwwroot\, BasePath: /, RelativePath: _framework/blazor.boot.json, AssetKind: Build, AssetMode: All, AssetRole: Primary, AssetRole: , AssetRole: , RelatedAsset: , AssetTraitName: WasmResource, AssetTraitValue: manifest, Fingerprint: z80dc9x1hg, Integrity: fR3Dvaj6I9/wjz/w1YCRyz0LW1L9xMD1ArnX/z1FnoY=, FileLength: 44247, LastWriteTime: 6/13/2025 11:43:10 AM +00:00, CopyToOutputDirectory: PreserveNewest, CopyToPublishDirectory: Never, OriginalItemSpec: ProjectA\obj\Release\net9.0\blazor.boot.json' and 'Identity: ProjectB\bin\Release\net9.0\wwwroot\_framework\blazor.boot.json, SourceType: Project, SourceId: ProjectB, ContentRoot: ProjectB\bin\Release\net9.0\wwwroot\, BasePath: /, RelativePath: _framework/blazor.boot.json, AssetKind: Build, AssetMode: All, AssetRole: Primary, AssetRole: , AssetRole: , RelatedAsset: , AssetTraitName: WasmResource, AssetTraitValue: manifest, Fingerprint: ycwgczvjn2, Integrity: 0q9kn7N7IA41H/mJpEClfxWpQDCNjYSFPcTVCdP4/XY=, FileLength: 50911, LastWriteTime: 6/13/2025 11:43:22 AM +00:00, CopyToOutputDirectory: PreserveNewest, CopyToPublishDirectory: Never, OriginalItemSpec: ProjectB\obj\Release\net9.0\blazor.boot.json' from different projects.

To hide domain specific stuff I replaced the paths to the Projects with ProjectA and ProjectB

Build Command where:

dotnet restore
dotnet build MySolution.slnx -c Release --no-restore

[paule96]

Okay now after some more hours on this I finally figured out what is wrong. If you use project dependcies (not to mix up with project references), you will get the error with the duplicate assets if you don't use StaticWebAssetBasePath. For me it was very confusing, because for me project dependencies just configures in which order projects should be build and don't change the build result.

So if you have something like that:

In your project you will get the duplicate asstest error.

Important note: The error only happens in a release build on your console. In a release build over VS or a debug build it will not happen

Remove the project dependcies and you don't need to define StaticWebAssetBasePath and any build configuration should work.

That was issue one.

If you have a usecase for StaticWebAssetBasePath, in my opinion you currently cannot use blazor with any UI framework, because it will break the links to the UI frameworks css file as mentiond in the describtion of this issue.

And the 3rd issue for me is, to uptodate the documentation about hosting blazor applications on subroutes, and explicitly explain, when or when not to use StaticWebAssetBasePath.

For me all my problems are solved, because I know now, why my build was broken without StaticWebAssetBasePath. (even, if it is not logical to me)