Blazor部署Docker后CSS样式失效，html与css文件的b-标识符不一致问题

Blazor的CSS隔离生成的b-xxxxxx标识符哈希值，默认是基于组件文件的绝对路径计算的，你的本地开发路径和Docker容器内的构建路径不一致，就会导致哈希不匹配；另外重复构建、构建缓存残留也会触发这个问题。

• 第一步：禁用构建阶段的CSS生成，统一在publish阶段生成
  现有Dockerfile里先执行了dotnet build再执行dotnet publish，两次构建都会生成CSS隔离哈希，存在缓存或路径差异时就会冲突。修改Dockerfile的build阶段参数，禁止build阶段生成CSS隔离文件，仅在publish阶段生成一次：
  把原有build命令

  RUN dotnet build "Logro.Server.csproj" -c Release -o /app/build
  

  替换为

  RUN dotnet build "Logro.Server.csproj" -c Release -o /app/build --no-restore /p:GenerateCssIsolationStyles=false
  

• 第二步：固定CSS隔离的哈希生成规则，避免路径影响
  在Blazor项目的.csproj文件（Blazor WebAssembly项目修改Logro.Client.csproj，Blazor Server项目修改Logro.Server.csproj）的PropertyGroup节点中添加配置，固定哈希计算的基路径：

  <!-- 固定CSS隔离计算的基路径，避免不同环境路径不同导致哈希变化 -->
  <CssScopedBasePath>$(MSBuildProjectDirectory)</CssScopedBasePath>
  <!-- 可选兜底方案：直接固定所有scope的后缀，所有标识符都会统一用你指定的后缀 -->
  <!-- <CssScopedIdentifierSuffix>fixed12345</CssScopedIdentifierSuffix> -->
  

• 第三步：清理Docker构建缓存，重新构建镜像
  旧构建缓存可能残留了错误的CSS文件，执行以下命令无缓存重新构建：

  docker-compose build --no-cache
  docker-compose up -d
  

• 第四步：确认环境变量配置
  你当前在Docker Compose里把ASPNETCORE_ENVIRONMENT=Docker作为构建参数传递，该参数默认不会影响dotnet构建逻辑，如果你有基于环境的条件编译规则，确认Docker环境下的CSS隔离配置和本地Release环境一致即可。

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