CSS Isolation & RCL Support does not generate the correct CSS import for WASM Apps not hosted at root

[philip-reed]

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

The documentation here states that CSS from the RCL's stylesheet is imported at the top of the app's stylesheet:

https://docs.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation?view=aspnetcore-6.0#razor-class-library-rcl-support

However, if the Blazor app is not hosted from root (for example where multiple WASM apps are being hosted from a single server at different urls), the URL created in the import statement ignores the StaticWebAssetBasePath.

However the documentation for hosting multiple WASM applications states that RCL CSS should be added manually to index.html

https://docs.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/webassembly?view=aspnetcore-6.0#static-assets-and-class-libraries-for-multiple-blazor-webassembly-apps

Adding the RCL CSS this way solves the problem, but the RCL is still also imported into the parent app CSS, and results in a 404.
However adding the base path to the imported css file path results in a 200.

Expected Behavior

Either the CSS Import should use the correct url, or there should be a way to disable the import statement and link the css manually in Index.html

Steps To Reproduce

Example App here:
https://github.com/philip-reed/HostedBlazorWithBaseHrefCss

The BlazorApp1.Client has a reference to RasorClassLibrary1 which has a SharedCounter component with custom CSS.
BlazorApp1.Client is served from /demo

Exceptions (if any)

NONE

.NET Version

6.0.201

Anything else?

Visual Studio 2022 - Running locally
ASPNETCORE_ENVIRONMENT=Development

[javiercn]

@philip-reed thanks for contacting us.

Your app is missing app.UseBasePath("/demo") here: https://github.com/philip-reed/HostedBlazorWithBaseHrefCss/blob/main/BlazorApp1/Server/Program.cs#L30

[philip-reed]

@javiercn

Thanks for taking a look.
I assume you mean to use UsePathBase(baseRef)?
If so, then I don't think this has made a difference.

I have updated the repro with this included.

Also, the doc for this state that using a <base href="/demo/"> in the index.html is the equivalent, and this already exists in the example app. Having both seems to stop the app working altogether.
https://docs.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/?view=aspnetcore-6.0&tabs=visual-studio#app-base-path

[philip-reed]

Sorry I misread that document, it seems you use one or the other when using the Blazor Server hosting model.
But for standalone, it says to use both.

It isn't clear what to use when using the Hosted Wasm model.

[javiercn]

@philip-reed I think the docs might be a bit out of date and need updates for 6.0. This always comes down to know where the server is serving the files from and adjusting the base path and other elements to make everything align.

With your sample, this works for me:

var builder = Host.CreateDefaultBuilder(args)
    .ConfigureWebHostDefaults(webBuilder =>
    {
        webBuilder.UseStartup<StartupClass>();
    });

var app = builder.Build();

await app.RunAsync();

public class StartupClass
{
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddControllersWithViews();
        services.AddRazorPages();
    }

    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        // Configure the HTTP request pipeline.
        if (env.IsDevelopment())
        {
            app.UseWebAssemblyDebugging();
        }
        else
        {
            app.UseExceptionHandler("/Error");
        }

        app.UseRouting();

        app.UseBlazorFrameworkFiles();
        app.UseStaticFiles();

        app.UseEndpoints(endpoints => {
            endpoints.MapRazorPages();
            endpoints.MapControllers();
            endpoints.MapFallbackToFile("/demo/{*path:nonfile}", "/demo/index.html");
        });

    }
}

[javiercn]

Alternatively

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddControllersWithViews();
builder.Services.AddRazorPages();

var app = builder.Build();

if (app.Environment.IsDevelopment())
{
    app.UseWebAssemblyDebugging();
}
else
{
    app.UseExceptionHandler("/Error");
}

app.UseBlazorFrameworkFiles();
app.UseStaticFiles();

app.MapRazorPages();
app.MapControllers();
app.MapFallbackToFile("/demo/{*path:nonfile}", "/demo/index.html");

await app.RunAsync();

[javiercn]

@guardrex can we get the docs updated for this topic?

[philip-reed]

@javiercn

The last code sample you provided seems to do the job for me too, thank you.
I landed on this issue when hosting multiple Blazor clients from the same hosted server.
This is why the code in the demo app uses app.UseWhen to try and match the route for the specific client app.

If its not too much to ask, what would this look like if a second Blazor Client project was added?
And the second client also had a reference to the shared counter component?

[javiercn]

@philip-reed the only thing that would change is that you would have a second app.MapFallBackToFile on the server and that second app would have its own base path