Blazor+MudBlazor项目部署到Docker容器后CSS样式无法加载如何解决？

1. 静态资源路径大小写匹配修复 #

• 本地Windows环境文件路径不区分大小写，而容器通常使用Linux基础镜像，路径大小写严格匹配，这是最常见的失效原因
• 可通过浏览器F12网络面板确认CSS资源是否返回404状态码，若为404优先检查路径大小写
• 重点核对MudBlazor内置资源引用路径_content/MudBlazor/MudBlazor.min.css的大小写，以及自定义CSS文件、wwwroot下目录的实际名称与引用路径完全一致

2. 修正Dockerfile资源复制逻辑 #

• 常见错误是发布阶段仅复制了编译后的程序集，遗漏了包含所有样式的wwwroot目录，标准发布阶段Dockerfile配置参考：

FROM mcr.microsoft.com/dotnet/sdk:7.0 AS build
WORKDIR /src
COPY ["你的项目名/你的项目名.csproj", "你的项目名/"]
RUN dotnet restore "你的项目名/你的项目名.csproj"
COPY . .
WORKDIR "/src/你的项目名"
RUN dotnet build "你的项目名.csproj" -c Release -o /app/build

FROM build AS publish
RUN dotnet publish "你的项目名.csproj" -c Release -o /app/publish /p:UseAppHost=false

FROM mcr.microsoft.com/dotnet/aspnet:7.0 AS base
WORKDIR /app
EXPOSE 80
EXPOSE 443
# 关键：完整复制publish目录下所有文件，包含wwwroot目录
COPY --from=publish /app/publish .
ENTRYPOINT ["dotnet", "你的项目名.dll"]

• 确认项目.csproj配置中没有修改<StaticWebAssetBasePath>参数，保持默认值即可保证MudBlazor等第三方组件的静态资源正常输出到发布目录
• 容器启动后可执行docker exec -it 容器ID ls /app/wwwroot确认静态资源是否存在于容器内

3. 调整中间件与路径配置 #

• 确认Program.cs中UseStaticFiles中间件的执行顺序在路由、Blazor中间件之前，顺序错误会导致静态资源请求无法被正常处理：

var builder = WebApplication.CreateBuilder(args);
// 服务注册逻辑省略
var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
// 必须在UseRouting、MapBlazorHub之前调用
app.UseStaticFiles();

app.UseRouting();
app.UseAuthorization();
app.MapBlazorHub();
app.MapFallbackToPage("/_Host");
app.Run();

• 如果容器部署时配置了自定义子路径，需要在UseStaticFiles之前添加PathBase配置：

app.UsePathBase("/你的自定义子路径");

4. 补充MIME类型配置 #

• 若Kestrel默认MIME配置缺失，可手动强制指定CSS文件的MIME类型：

builder.Services.Configure<StaticFileOptions>(options =>
{
    var provider = new FileExtensionContentTypeProvider();
    provider.Mappings[".css"] = "text/css";
    options.ContentTypeProvider = provider;
});

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