使用 nginx 在 docker 中托管时缺少 Blazor WASM 样式

Question

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

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

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

但是当我发布并尝试使用 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

花了很长时间调试这个问题后，我终于让它工作了。 我找到了这个项目：https://github.com/waelkdouh/DockerizedClientSideBlazor/ 并开始比较。我能看到的唯一不同的是，他有一个 .dockerignore 我复制了它，一切都开始工作了。不知道是什么问题。看不到列出的任何文件如何破坏 CSS .....

Answer 2

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