title: Blazor WASM styling missing when hosted in docker using nginx
body: <p>I have a strange issue, where my styling is broken when I try to host my blazor WASM project using Nginx. I tried to follow a couple of different guides and they were similar and had same issue for me.</p>
  <p>I have the code here: <a href="https://github.com/TopSwagCode/Dotnet.IdentityServer/tree/master/src/BlazorClient" rel="nofollow noreferrer">https://github.com/TopSwagCode/Dotnet.IdentityServer/tree/master/src/BlazorClient</a></p>
  <p>When I debug locally or publish locally and serve from dotnet serve I get the following:</p>
  <p><a href="https://i.stack.imgur.com/EvSZM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EvSZM.png" alt="enter image description here" /></a></p>
  <p>But when I publish and try to run it within docker using Nginx I get this:</p>
  <p><a href="https://i.stack.imgur.com/rs0JB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rs0JB.png" alt="enter image description here" /></a></p>
  <p>My buttons are still there, but I can't see them since they are white.</p>
  <p>My dockerfile is pretty simple:</p>
  <pre><code>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
  </code></pre>
  <p>My nginx config</p>
  <pre><code>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;
          }
      }
  }
  </code></pre>
  <p>I can't find any &quot;not found&quot; or similar in network tab.</p>
  <p>Edit:</p>
  <p>When comparing both running side by side, I was not able to find CSS for linear-gradient, which is the purple side of the menu. Digging a bit deeper, it seems all CSS in MainLayout.razor.css was not being found.</p>
  <p><a href="https://github.com/TopSwagCode/Dotnet.IdentityServer/blob/master/src/BlazorClient/Shared/MainLayout.razor.css" rel="nofollow noreferrer">https://github.com/TopSwagCode/Dotnet.IdentityServer/blob/master/src/BlazorClient/Shared/MainLayout.razor.css</a></p>
  <p>When running locally:</p>
  <p><a href="https://i.stack.imgur.com/OqnTB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OqnTB.png" alt="enter image description here" /></a></p>
  <p>When running using Docker+Nginx</p>
  <p><a href="https://i.stack.imgur.com/0wi2f.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0wi2f.png" alt="enter image description here" /></a></p>
  <p>So seems to me, the CSS is missing somehow???</p>
  <p>Edit 2:</p>
  <p>The build hash for CSS seems to not match after deploy.
  So I found the CSS file linked on my Page to be like the following:</p>
  <p><a href="https://i.stack.imgur.com/HhLF2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HhLF2.png" alt="enter image description here" /></a></p>
  <p>But my HTML doesn't match that. It looks like this:</p>
  <p><a href="https://i.stack.imgur.com/YJy1P.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YJy1P.png" alt="enter image description here" /></a></p>
  <p>Don't know how that can break during build and deploy for Docker+Nginx??? Is there something I am doing wrong in my dockerfile???</p>