Hot Reload For CSS Not Working With Blazor WebAssembly Hosted

Question

I noticed the following behaviour in Visual Studio 2022 (version 17.0.0) with a .Net 6.0 Blazor project:

1. Create a new Blazor WebAssembly project and DO NOT select the 'ASP.NET Core hosted' option.
2. Run the application without debugging.
3. Ensure Hot Reload is enabled
4. Make a change to the CSS. You will notice the browser instantly displays the change without needing a refresh / reload.

Repeat the steps above but this time during step 1 select the 'ASP.NET Core hosted' option. Now the CSS hot reload functionality is not working, even though making a change to the razor page itself does still hot reload (such adding or changing a HTML element).

According to the documentation*, hot reload is supported by WebAssembly when running without a debugger. I can't understand why only the CSS hot reload does not work if the 'ASP.NET Core hosted' option is chosen. The CSS and server appear to be unrelated.

*https://devblogs.microsoft.com/dotnet/update-on-net-hot-reload-progress-and-visual-studio-2022-highlights/

Answer 1

Ok, so this is what I did in order for an existing project (web assembly hosted version) to work with .net hot reload WITHOUT DEBUGGING:

1. Install Visual Studio 2022.
2. Download and install latest version of sdk and runtime. You could already have them but just to be safe: SDK and Runtime
3. Make sure your solution is targeting .NET 6 or update the existing solution to .net 6. Follow the steps provided here: Update to .NET 6 from .NET 5
4. Go to Tools -> Options and check everything that is connected to hot reload including the CSS Hot Reload box like this:

5. Delete .bin and .debug folders from your solution, restart your PC and rebuild the solution after restart.