dotnet / dotnet/maui

MAUI Blazor hybrid CSS hot reload does not work when running "dotnet watch"

Open
#33,374 5 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

area-blazor platform/windows s/triaged s/verified t/bug
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

  1. Clean machine: Win11 x64 25h2 ENU
  2. Install the .NET 10.0.101 SDK
  3. Install maui workload
    dotnet workload install maui

Repro Steps

  1. Open up a normal Command Prompt
  2. Create a MAUI Blazor Hybrid project using the following:
     dotnet new maui-blazor -o MauiBlazor
     cd MauiBlazor
  1. Run the project with the dotnet watch command
    dotnet watch run -f net10.0-windows10.0.19041.0
  2. Open the Components\Layout\MainLayout.razor.css file in Notepad, update the .page selector and save it. Then view the command window and webpage.
    .page {
        position: relative;
        display: flex;
        flex-direction: column;
    +   background-color: orange;
    }
    
  3. Open the wwwroot\app.css file, update the .btn-primary selector 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".

Image

After saving the changes to the css file, the webpage did not display the changes.

Image

Image

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:

  1. This issue does not repro when editing the .razor file.
  2. This issue does not repo when debugging with VS 18.3 Insiders 3.
  3. I do some verifications using dotnet watch in 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.