使用 ASP.NET Core 和 TailwindCSS 进行热重载（或者：向 dotnet watch 添加额外的命令）

Question

我正在研究一种将 TailwindCSS 与 ASP.NET 结合使用的良好热重载工作流程。

我决定使用 VSCode，因为 VisualStudio 没有良好的顺风扩展，并且 Rider 的扩展不支持 Razor 文件。

现在有两个相互竞争的观察者更新文件：

• dotnet watch

  ，以及

• tailwindcss --watch

同时使用它们几乎可以工作，但不完全是：

dotnet watch

更快，并且不会接受

tailwindcss --watch

所做的更改。因此，您始终只能在上次进行编辑之前看到一次更改。

我尝试添加

tailwindcss

作为构建后步骤（如果它在 razor 文件上触发就足够了）：

<Target Name="PostBuild" AfterTargets="PostBuildEvent">
  <Exec Command="npx tailwindcss -i ./wwwroot/css/input.css -o ./wwwroot/css/output.css" />
</Target>

但是，当热重载发生时，

dotnet watch

不会执行该步骤。

dotnet watch

确实支持运行

run

以外的命令，但仍然仅支持

dotnet

工具的命令，而且我没有看到执行任意其他命令的方法。

有人有更多想法吗？

Answer 1

找到了您的问题并且具有完全相同的用例。稍微摆弄一下就弄清楚了。

正如您在 .csproj 中所得到的：

<Target Name="PostBuild" AfterTargets="PostBuildEvent">
  <Exec Command="npx tailwindcss -i ./wwwroot/css/input.css -o ./wwwroot/css/output.css" />
</Target>

但是下一个缺少的部分是热重载功能。 https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-watch#hot-reload 特别是本节“让您可以将更改应用到正在运行的应用程序，而无需 重建并重新启动它 '

所以上面的 PostBuild 步骤没有运行，这就是为什么没有看到任何变化。

运行

dotnet watch --no-hot-reload

应该会导致应用程序每次都重新构建，虽然速度稍慢，但至少它会自动执行顺风命令。

dotnet watch 文档中也有此部分 https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-watch#advanced-configuration我认为可能可以根据该 ItemGroup 触发命令，但我不是MSBuild 专家，但不知道您会如何去做。

Answer 2

还有另一种方法，它有点老套，但热重载似乎继续按预期工作。

使用普通的 Tailwind CLI 观察器，例如

npx tailwindcss -i ./app.css -o ./wwwroot/app.css --watch

创建以下静态类并将其放在项目中的某个位置：

[assembly: System.Reflection.Metadata.MetadataUpdateHandler(typeof(HotReloadDelayer))]

public static class HotReloadDelayer
{
    private static readonly TimeSpan DelayHotReload = TimeSpan.FromSeconds(3);
    
    public static void ClearCache(Type[]? updatedTypes)
    {
        Console.WriteLine("Clearing cache...");
    }

    public static void UpdateApplication(Type[]? updatedTypes)
    {
        Console.WriteLine($"Giving Tailwind {DelayHotReload.Seconds} seconds to settle...");
        Thread.Sleep(DelayHotReload);
        Console.WriteLine("Reloading...");
    }
}

（看起来像巫术，但实际上它是被 dotnet watch 拾取的。你可以根据自己的喜好重命名该类。）

这将使热重载器在实际重新加载应用程序代码之前等待 3 秒。根据 Tailwind 完成任务所需的时间来调整

DelayHotReload

。