使用 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 专家，也不知道你会如何去做。