Blazor Web App中自定义作用域CSS包路由路径的方法问询

要修改<ProjectName>.styles.css的服务路由，确实需要通过自定义MSBuild目标调整生成的<ProjectName>.staticwebassets.endpoints.json文件，以下是具体实现步骤：

实现步骤 #

1. 编辑项目文件（.csproj）
   在你的Blazor Web App项目中，右键选择"编辑项目文件"，添加以下MSBuild目标配置：

<Target Name="CustomizeStylesCssRoute" AfterTargets="GenerateStaticWebAssets">
  <PropertyGroup>
    <!-- 指向构建时生成的静态资源端点配置文件 -->
    <StaticWebAssetsEndpointsFile>$(IntermediateOutputPath)staticwebassets.endpoints.json</StaticWebAssetsEndpointsFile>
    <!-- 替换成你想要的自定义路由，示例为/css/app-custom-styles.css -->
    <CustomStylesRequestPath>/css/app-custom-styles.css</CustomStylesRequestPath>
  </PropertyGroup>

  <!-- 用PowerShell脚本修改JSON中的路由配置 -->
  <Exec Command="powershell -Command &quot;$json = Get-Content '$(StaticWebAssetsEndpointsFile)' | ConvertFrom-Json; $styleEntry = $json.Assets | Where-Object { $_.AssetPath -like '*$(AssemblyName).styles.css' }; if ($styleEntry) { $styleEntry.RequestPath = '$(CustomStylesRequestPath)' }; $json | ConvertTo-Json -Depth 10 | Set-Content '$(StaticWebAssetsEndpointsFile)'&quot;" />
</Target>

2. 配置细节说明

   • AfterTargets="GenerateStaticWebAssets"：确保我们的修改动作在系统生成静态资源配置文件之后执行，保证能修改到正确的文件。
   • $(AssemblyName)：自动匹配项目程序集名称，无需手动替换项目名，对应生成的<AssemblyName>.styles.css文件。
   • CustomStylesRequestPath：直接替换为你需要的自定义路由即可，比如/static/css/my-app-styles.css。

3. 验证配置生效
   清理并重建项目，查看obj\Debug\net[对应版本]\staticwebassets.endpoints.json文件，找到styles.css对应的条目，确认RequestPath已更新为自定义路径。启动项目后，静态资源中间件会使用新路由提供CSS隔离文件。

跨环境兼容说明 #

如果使用非Windows环境，可将PowerShell命令替换为基于jq工具的Shell脚本（需提前安装jq）：

<Exec Command="jq --arg newPath '$(CustomStylesRequestPath)' '.Assets |= map(if .AssetPath | contains(&quot;$(AssemblyName).styles.css&quot;) then .RequestPath = $newPath else . end)' '$(StaticWebAssetsEndpointsFile)' > temp.json && mv temp.json '$(StaticWebAssetsEndpointsFile)'" />

内容的提问来源于stack exchange，提问作者iKingNinja