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?

• 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 .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