不使用 Blazor WebAssembly 托管的 CSS 的热重载

Posted 2023-03-27

【中文标题】不使用 Blazor WebAssembly 托管的 CSS 的热重载

【英文标题】：Hot Reload For CSS Not Working With Blazor WebAssembly Hosted

【发布时间】：2021-12-29 19:46:48

【问题描述】：

我注意到带有 .Net 6.0 Blazor 项目的 Visual Studio 2022（版本 17.0.0）中出现以下行为：

创建一个新的 Blazor WebAssembly 项目，不要选择“ASP.NET Core 托管”选项。 无需调试即可运行应用程序。 确保启用热重载 对 CSS 进行更改。您会注意到浏览器会立即显示更改，而无需刷新/重新加载。

重复上述步骤，但这次在第 1 步中选择“ASP.NET Core 托管”选项。现在 CSS 热重载功能不起作用，即使对 razor 页面本身进行更改仍然会热重载（例如添加或更改 html 元素）。

根据文档*，在没有调试器的情况下运行时，WebAssembly 支持热重载。如果选择了“ASP.NET Core 托管”选项，我不明白为什么只有 CSS 热重载不起作用。 CSS 和服务器似乎无关。

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

【问题讨论】：

我有同样的问题，我有一个 webassembly 托管的应用程序并且热重载不起作用。通过重新加载浏览器来应用未经调试的更改。奇怪的是，微软在一个 webassembly 托管项目上有一个演示视频，其中热重载正在工作。我认为我们在代码中的某处遗漏了一些设置或实现：youtube.com/…

【参考方案1】：

好的，这就是我为了让现有项目（Web 程序集托管版本）在不调试的情况下使用 .net 热重载而所做的：

安装 Visual Studio 2022。 下载并安装最新版本的 sdk 和运行时。您可能已经拥有它们，但为了安全起见： SDK and Runtime 确保您的解决方案面向 .NET 6 或将现有解决方案更新为 .net 6。按照此处提供的步骤操作：Update to .NET 6 from .NET 5 转到工具 -> 选项并检查与热重载相关的所有内容，包括 CSS 热重载框，如下所示：

从您的解决方案中删除 .bin 和 .debug 文件夹，重新启动您的 PC 并在重新启动后重建解决方案。

【讨论】：

服务器版本也有同样的问题。我正在使用 dotnet watch 并且热重载说成功，但我不是按 ctrl-R 进行刷新，一切都很好。

我同意@ShaunRoach 的观点，我们从 .Net 5 升级了一个项目，HR 工作但仅刷新页面。我在一个新应用程序中进行了测试，它无需刷新页面即可工作。然后我比较了这些项目，并没有发现升级中缺少任何东西。呃。