如何打造单文件 Blazor Server 应用

前言

上次，我们介绍了《如何打造单文件前后端集成 ASP.NET Core 应用》。

但是，网友说，对于 Blazor Server 项目此方法无效。

于是，我们测试了一下：

BlazorApp1.csproj

<Project Sdk="Microsoft.NET.Sdk.Web"><PropertyGroup><TargetFramework>net6.0</TargetFramework><Nullable>enable</Nullable><ImplicitUsings>enable</ImplicitUsings><GenerateEmbeddedFilesManifest>true</GenerateEmbeddedFilesManifest></PropertyGroup><ItemGroup><PackageReference Include="Microsoft.Extensions.FileProviders.Embedded" Version="6.0.8" /></ItemGroup><ItemGroup><EmbeddedResource Include="wwwroot\**" /></ItemGroup>
</Project>

Program.cs

public static void Main(string[] args)
{
...app.UseFileServer(new FileServerOptions{FileProvider = new ManifestEmbeddedFileProvider(typeof(Program).Assembly, "wwwroot")});app.UseStaticFiles();
...
}

发布成单文件后运行，发现除了BlazorApp1.styles.css，其他静态文件都可以正常加载:

BlazorApp1.styles.css 在哪里？

查找BlazorApp1.styles.css文件，我们发现它并不在项目源码下的wwwroot目录，而是在obj\Debug\net6.0\scopedcss\bundle目录。

这说明，它是在编译中生成的。

查看官方文档，原来这是被称为CSS 隔离的特性。

CSS 隔离

若要定义组件特定的样式，需要创建一个同名的.razor.css文件，例如NavMenu.razor.css。

定义的样式仅应用于对应组件的呈现输出。在应用的其他位置定义的任何同名 CSS 声明都不会与组件的样式冲突。

CSS 隔离在生成时发生。Blazor 会重写 CSS 选择器以匹配组件呈现的标记。重写的 CSS 样式被作为静态资产捆绑和生成。

也就是说，生成时会将所有组件样式合并到{ASSEMBLY NAME}.styles.css文件中，其中占位符 {ASSEMBLY NAME} 是项目的程序集名称。

解决思路

既然BlazorApp1.styles.css是编译中生成的，那么只需要在编译时，将生成的 css 文件复制到wwwroot目录下，再打包到资源文件中，不就可以实现吗？

但是，查看 MSBuild 生成日志（具体使用方法请查看我以前的文章）。我们发现，生成 CSS 隔离文件的 Target _GenerateScopedCssFiles 是在编译之后执行的，而生成资源文件的 Target _GenerateEmbeddedFilesManifest是在编译之前就执行了。

所以打包到资源文件时，根本拿不到BlazorApp1.styles.css文件。看来此路不通！

但是转念一想，为什么一定要拿本次生成的BlazorApp1.styles.css文件呢？我们拿上次生成的文件不就行了！！！

实现

修改代码，指定打包的资源文件源地址：

BlazorApp1.csproj

<ItemGroup><EmbeddedResource Include="bin\Release\net6.0\publish\wwwroot\**" />
</ItemGroup>

Program.cs

app.UseFileServer(new FileServerOptions
{FileProvider = new ManifestEmbeddedFileProvider(typeof(Program).Assembly, "bin\\Release\\net6.0\\publish\\wwwroot")
});

然后点击 2 次"发布"按钮，第一次点击的目的是为了生成需要打包到资源文件的"bin\Release\net6.0\publish\wwwroot"目录。

再次运行单文件，成功！