Azure Pipeline部署DotNet+Angular应用后Kendo UI Grid样式异常求助

• 静态资源优化策略差异：Azure Pipeline部署时可能启用了更激进的CSS压缩、Tree Shaking等优化，导致Kendo UI Grid的图标定位样式被错误修改或字体文件加载路径偏移；而Visual Studio手动部署的默认优化策略更保守，不会破坏原有样式结构。
• 资源文件复制不完整：Pipeline构建脚本可能未正确将Kendo UI的字体文件（如.woff2、.ttf）复制到部署包的对应目录，或者打包时将资源路径处理为绝对路径，与App Service运行环境的路径不匹配；VS手动部署会自动处理资源的复制和路径映射。
• 构建配置不一致：Pipeline中Angular的production构建可能启用了本地未使用的优化参数（如buildOptimizer、aot的特殊配置），导致Kendo UI的CSS样式被错误移除或重构。

• 调整静态资源优化配置

  • 在Azure Pipeline的构建步骤中，临时禁用CSS优化进行测试：修改Angular的angular.json，将production配置下optimization的css选项设为false，确认是否是优化导致的问题后，再逐步调整优化参数，避免破坏Kendo UI的样式规则。
  • 检查是否使用了第三方压缩工具，若有则暂时禁用，确保Kendo UI的原始CSS文件未被篡改。

• 确保资源文件完整与路径正确

  • 在Pipeline中添加步骤，验证Kendo UI的字体文件是否被复制到部署包的wwwroot/fonts（或对应路径），对比VS手动部署的包内容，确保文件一致。
  • 修改angular.json的assets配置，明确指定Kendo UI字体资源的复制规则：

    "assets": [
      "src/favicon.ico",
      "src/assets",
      {
        "glob": "**/*",
        "input": "./node_modules/@progress/kendo-theme-default/dist/fonts/",
        "output": "./fonts/"
      }
    ]
    

  • 检查Kendo UI CSS中的图标路径是否为相对路径，避免绝对路径导致的环境适配问题。

• 统一构建配置

  • 在Pipeline中使用与VS手动部署完全一致的构建命令，比如VS用ng build --configuration production，Pipeline也执行相同命令，不要添加额外参数。
  • 对齐angular.json中production配置的buildOptimizer、aot等参数，确保和本地构建逻辑一致。

• 清除App Service缓存

  • 部署完成后，登录Azure Portal进入目标App Service，在“概述”页面点击“重新启动”，清除服务器端的静态资源缓存，避免旧缓存导致的样式异常。

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