dotnet / dotnet/aspnetcore

Blazor With WebView2: CSS Hot Reload Does Not Work

Open
#37,496 7 comments 3 reactions 0 assignees View on GitHub
area-commandlinetools feature-hot-reload
Dominant language
C#
Stars
38.4k
Forks
10.9k
Avg merge
2d 10h
Merged PRs (30d)
281

Description

### Describe the bug
Hot reloading scoped css works for Blazor Server and should also work for Blazor within WebView2 with `Microsoft.AspNetCore.Components.WebView.Wpf` package.

Unfortunately, it doesn't.

Curiously, hot reloading DOM changes like editing the text of an h1 element works as expected.

As shown below, `dotnet watch` does somewhat work for css (with manual/hacky workarounds).
VS 2022 Hot Reload does not update the generated bundle css file and therefore does not work at all.

### To Reproduce
1. Follow the instructions in the announcement post for _**WPF**_:
https://devblogs.microsoft.com/aspnet/asp-net-core-updates-in-net-6-preview-3/#blazorwebview-controls-for-wpf-windows-forms
2. Update NuGet packages to latest .NET 6 versions
3. Add an isolated css file `Counter.razor.css` and a style like
```css
h1 { color: red; }
```
4. Run `dotnet watch --verbose` in the command line in the project-directory
5. Change the color in the css file to `blue`
6. `dotnet watch` outputs updated file but it's **_not_ reflected** in-app
7. Click somewhere in the app and press CTRL+R to reload the page
8. See the updated style reflected in the app

### Workaround 1 (With dotnet watch)
Click somewhere in the app window and press CTRL+R

### Workaround 2 (With dotnet watch)
Force reloading of css with timer in JS in `index.html` (for a project named `WpfApp1`):
```html





Blazor app





An unhandled error has occurred.
Reload
🗙



var styleFallback = document.querySelector("#flickerPreventerFallback");
var style = document.querySelector("link[id='override']");

setInterval(() => {
var stylesheet = Array.from(document.styleSheets).filter(x => x.ownerNode === style)[0];
var content = Array.from(stylesheet.cssRules).map(rule => rule.cssText).join(' ');

styleFallback.innerHTML = content;
var oldHref = style.href;
style.href = "";
style.href = oldHref;
}, 500)

```

### Further technical details
- VS 2022 Preview 5
- .NET 6 RC2 (RC1 also did not work)
- Include the output of `dotnet --info`:

dotnet --info Output

```
.NET SDK (reflecting any global.json):
Version: 6.0.100-rc.2.21505.57
Commit: ab39070116

Runtime Environment:
OS Name: Windows
OS Version: 10.0.22000
OS Platform: Windows
RID: win10-x64
Base Path: C:\Program Files\dotnet\sdk\6.0.100-rc.2.21505.57\

Host (useful for support):
Version: 6.0.0-rc.2.21480.5
Commit: 6b11d64e7e

.NET SDKs installed:
3.1.412 [C:\Program Files\dotnet\sdk]
5.0.301 [C:\Program Files\dotnet\sdk]
5.0.400 [C:\Program Files\dotnet\sdk]
5.0.402 [C:\Program Files\dotnet\sdk]
6.0.100-rc.2.21505.57 [C:\Program Files\dotnet\sdk]

.NET runtimes installed:
Microsoft.AspNetCore.App 3.1.18 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 3.1.20 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 5.0.7 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 5.0.9 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 5.0.11 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.AspNetCore.App 6.0.0-rc.2.21480.10 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
Microsoft.NETCore.App 3.1.18 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 3.1.20 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 5.0.7 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 5.0.9 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 5.0.11 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.NETCore.App 6.0.0-rc.2.21480.5 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
Microsoft.WindowsDesktop.App 3.1.18 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
Microsoft.WindowsDesktop.App 3.1.20 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
Microsoft.WindowsDesktop.App 5.0.7 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
Microsoft.WindowsDesktop.App 5.0.9 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
Microsoft.WindowsDesktop.App 5.0.11 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
Microsoft.WindowsDesktop.App 6.0.0-rc.2.21501.6 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
```

Contributor guide

Open the contributing guide

Research direction

Reproduce the issue in the WPF WebView2 sample described in the announcement, using an isolated Counter.razor.css file and dotnet watch. Start by inspecting index.html and the blazor.webview.js integration; done means changing scoped CSS updates the running app without pressing CTRL+R or using a reload workaround.

Written by the indexing model from the issue text.

Assessment

Tech stack
csharp, css, javascript
Domain
desktop, frontend, tooling
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.