fix: reboot.css 404 when using non root base path

[cdock1029]

🐛 Bug Report

This is more of a suggestion to change the template.. After setting my base path in Program.cs app.UsePathBase("/Fluent"); and in App.razor <base href="/Fluent/">, everything works as it should (it seems there are many ways to configure this depending on render mode..this worked for my use case for now at least).

Except the request for reboot.css that
originates in app.css at @import '/_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css'; fails with 404 not found.

Removing the leading slash fixes it:

@import '_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css';

It seems the current way is just a special case that works when hosted at root /, but the general solution is don't prefix with slash and should work always.

Aside from this, I moved this import to App.razor to version the css:

<link rel="stylesheet" href="@Assets["_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css"]" />

and maybe that is better way for the template to use it? Not sure, in any case the leading slash is removed.

💻 Repro or Code Sample

🤔 Expected Behavior

The template should work for different base path arrangements without changing, if possible.

💁 Possible Solution

Remove leading slash, also move to App.razor and wrap in @Assets for the Web App template

• OS & Device: [Windows, Linux]
• Browser [Microsoft Edge]
• .NET and Fluent UI Blazor library Version [4.11.8]

[vnbaaij]

We can definitely remove the leading slash if that is causing issues in some cases. Just need to verify.

As the library targets .NET 8 as well, we can't generally use the href="@assets[]" construct.