dotnet / dotnet/aspnetcore

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

Open
#62,270 5 comments 0 reactions 0 assignees View on GitHub
area-blazor Docs
Dominant language
C#
Stars
38.4k
Forks
10.9k
Avg merge
2d 6h
Merged PRs (30d)
290

Description

### Is there an existing issue for this?

- [x] I have searched the existing issues

### Describe the bug

> Note: This issue was first described [here](https://github.com/microsoft/fluentui-blazor/issues/3886)

# 🐛 Bug Report

If you try to host your blazor application in a subfolder and follow this [guide](https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/webassembly/multiple-hosted-webassembly?view=aspnetcore-7.0&viewFallbackFrom=aspnetcore-9.0&pivots=route-subpath#static-assets) it will generate a wrong .styles.css file.

> Note: To get a `.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:

```css
@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:

```css
@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
1. Start the project (CTRL+F5)
1. The aspire dashboard should open itself in a browser
2. click the URL next to proxy in the Aspire Dashboard
1. Hit F12 to open the browser development tools
1. Go to source and open the folder `blazorapp1`
1. Open the file `BlazorApp1.styles.css`
1. 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:

```css
@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:

```css
@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_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.