.NET Core Web API中本地Bootstrap5及自定义CSS无法加载问题

解决方案 #

1. 修正CSS资源引用路径 #

你配置的静态文件中间件指定了RequestPath = "/StaticFiles"，所以所有静态资源的访问路径都需要携带该前缀，将cshtml中的CSS引用修改为：

<link href="/StaticFiles/grafana.light.min.css" rel="stylesheet" />
<link rel="stylesheet" href="/StaticFiles/bootstrap.min.css"/>

如果是Razor视图渲染场景，推荐使用~根路径匹配符避免路由层级导致的相对路径错误：

<link href="~/StaticFiles/grafana.light.min.css" rel="stylesheet" />
<link rel="stylesheet" href="~/StaticFiles/bootstrap.min.css"/>

2. 检查静态文件的复制配置 #

选中StaticFiles文件夹下的所有CSS文件，右键打开「属性」面板，将「复制到输出目录」选项设置为如果较新则复制，避免编译后静态文件没有被同步到输出目录，导致PhysicalFileProvider无法读取资源。

3. 确认静态文件中间件顺序 #

检查Startup.cs的Configure方法中，app.UseStaticFiles的注册顺序必须在app.UseRouting之后、app.UseAuthorization/app.UseEndpoints之前，顺序错误会导致静态文件请求无法被中间件拦截处理。

4. 验证排查 #

配置完成后直接在浏览器地址栏访问 {你的服务地址}/StaticFiles/bootstrap.min.css，如果可以正常返回CSS内容则配置生效，否则依次检查上述3项配置即可。

内容的提问来源于stack exchange，提问作者Harimanda Jerrys Randriamire