MAUI Blazor hybrid CSS hot reload does not work when running "dotnet watch"
Nobody has claimed this yet.
- Dominant language
- C#
- Stars
- 23.3k
- Forks
- 2k
- Avg merge
- 1d 14h
- Merged PRs (30d)
- 296
Description
Regression Info: Also repro on 9.0 project
Install Steps
- Clean machine: Win11 x64 25h2 ENU
- Install the .NET 10.0.101 SDK
- Install maui workload
dotnet workload install maui
Repro Steps
- Open up a normal Command Prompt
- Create a MAUI Blazor Hybrid project using the following:
dotnet new maui-blazor -o MauiBlazor
cd MauiBlazor
- Run the project with the
dotnet watchcommand
dotnet watch run -f net10.0-windows10.0.19041.0 - Open the
Components\Layout\MainLayout.razor.cssfile in Notepad, update the.pageselector and save it. Then view the command window and webpage..page { position: relative; display: flex; flex-direction: column; + background-color: orange; } - Open the
wwwroot\app.cssfile, update the.btn-primaryselector and save it. Then view the command window and webpage..btn-primary { + color: red; background-color: #1b6ec2; border-color: #1861ac; }
Actual Result
After saving the changes to the .razor.css file, the webpage did not display the changes, but CMD displayed "Hot reload of scoped CSS was successful".
After saving the changes to the css file, the webpage did not display the changes.
Expected Result
CSS hot reload successful.
Error Log
C:\Users\v-xinyfe\MauiBlazor>dotnet watch run -f net10.0-windows10.0.19041.0
dotnet watch 🔥 Hot reload enabled. For a list of supported edits, see https://aka.ms/dotnet/hot-reload.
dotnet watch 💡 Press Ctrl+R to restart.
dotnet watch 🔨 Building C:\Users\v-xinyfe\MauiBlazor\MauiBlazor.csproj ...
dotnet watch 🔨 Build succeeded: C:\Users\v-xinyfe\MauiBlazor\MauiBlazor.csproj
Using launch settings from C:\Users\v-xinyfe\MauiBlazor\Properties\launchSettings.json...
dotnet watch ⌚ File updated: .\Components\Layout\MainLayout.razor.css
dotnet watch 🔥 Hot reload of scoped css succeeded.
dotnet watch ⌚ No C# changes to apply.
dotnet watch ⌚ File updated: .\wwwroot\app.css
dotnet watch ⌚ No C# changes to apply.
dotnet watch 🛑 Shutdown requested. Press Ctrl+C again to force exit.
dotnet watch ⌚ [MauiBlazor (net10.0-windows10.0.19041.0)] Exited
Note:
- This issue does not repro when editing the .razor file.
- This issue does not repo when debugging with VS 18.3 Insiders 3.
- I do some verifications using
dotnet watchin different VS environments, and the results are as follows.
| Vs | Including sdk version | Maui version | Project templates | Result |
|---|---|---|---|---|
| 18.3 Insiders 3 | 10.0.101 | 10.0.1 | 10.0 | razor.css file - repro css file - repro |
| 9.0 | razor.css file – repro css file - repro |
|||
| 17.14.23 | 9.0.309 | 9.0.111 | 9.0 | razor.css file – repro css file - not repro(fixed by https://github.com/dotnet/maui/issues/28134) |
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the issue with dotnet watch run -f net10.0-windows10.0.19041.0 in the generated MAUI Blazor project. Compare how changes in Components\Layout\MainLayout.razor.css and wwwroot\app.css are handled; done means both edits appear in the running webpage without restarting.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- csharp, css
- Domain
- desktop, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100