使用 nginx 托管在 docker 中时 Blazor WASM 样式丢失

Question

我有一个奇怪的问题，当我尝试使用 Nginx 托管我的 blazor WASM 项目时，我的样式被破坏了。我尝试遵循几个不同的指南，它们很相似并且对我来说有同样的问题。

我这里有代码： https: //github.com/TopSwagCode/Dotnet.IdentityServer/tree/master/src/BlazorClient

当我在本地调试或在本地发布并从 dotnetserve 提供服务时，我得到以下信息：

但是当我发布并尝试使用 Nginx 在 docker 中运行它时，我得到了这个：

我的按钮仍然在那里，但我看不到它们，因为它们是白色的。

我的 dockerfile 非常简单：

FROM mcr.microsoft.com/dotnet/sdk:5.0 AS build-env
WORKDIR /app
COPY . ./
RUN dotnet publish -c Release -o output
FROM nginx:alpine
WORKDIR /var/www/web
COPY --from=build-env /app/output/wwwroot .
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80

我的 nginx 配置

events { }
http {
    include mime.types;
    types {
        application/wasm wasm;
    }

    server {
        listen 80;

        # Here, we set the location for Nginx to serve the files
        # by looking for index.html
        location / {
            root /var/www/web;
            try_files $uri $uri/ /index.html =404;
        }
    }
}

我在网络选项卡中找不到任何“未找到”或类似内容。

编辑：

当比较两者并排运行时，我无法找到线性渐变的 CSS，它是菜单的紫色一侧。深入挖掘一下，似乎没有找到 MainLayout.razor.css 中的所有 CSS。

https://github.com/TopSwagCode/Dotnet.IdentityServer/blob/master/src/BlazorClient/Shared/MainLayout.razor.css

本地运行时：

使用Docker+Nginx运行时

所以在我看来，CSS 不知何故丢失了？？？

编辑2：

CSS 的构建哈希在部署后似乎不匹配。所以我发现我的页面上链接的 CSS 文件如下所示：

但我的 HTML 与此不匹配。它看起来像这样：

不知道在 Docker+Nginx 的构建和部署过程中会如何中断？？？我的 dockerfile 中是否做错了什么？？？

Answer 1

我以前也遇到过这个问题。删除你的 bin a obj 文件夹。似乎存在一些缓存问题，作用域 css 中生成的作用域在调试和发布之间不匹配。