正确打包 CSS 个文件以作为 Azure DevOps 扩展的一部分部署到 Azure CDN

Question

我正在开发一个 Azure DevOps 扩展，它显示当前 Sprint 的工作项摘要以供打印。

我无法正确发布静态 CSS 文件。

我在文件部分的 manifest.json 中配置了以下内容：

    {
        "path": "css/print.css",
        "contentType": "text/css",
        "addressable": true
    },
    {
        "path": "css/screen.css",
        "contentType": "text/css",
        "addressable": true
    },

项目的结构是：

css/screen.css
css/print.css
board-cards.html
vss-extension.json

正在阅读此文档：https://docs.microsoft.com/en-us/azure/devops/extend/develop/static-content indicates that the static content should be published to: https://publisher.gallery.vsassets.io。

调试时 - 网络日志中出现以下两个 404：

https://publisher.gallerycdn.vsassets.io/css/print.css https://publisher.gallerycdn.vsassets.io/css/screen.css

(为了方便起见，我已将发布商帐户名称更改为通用 "publisher" 字符串)

我在7zip中打开了.vsix，文件夹和css文件都在压缩包中。经过数小时的谷歌搜索和 Whosebug 搜索后，我无法找到解决方案。

我尝试将 "files" 中的条目更改为：

{
   "path": "css",
   "addressable": true
}

然而这没有效果。

有谁能就我遗漏或做错的事情向我提出建议吗？

Answer 1

通过进一步调试，我发现这些文件确实存在于 URL 下，特定于发布的版本。

例如https://publisher.gallerycdn.vsassets.io/extensions/publisher/board-cards/1.0.64/1545996658773/css/screen.css

然后我检查了标记，我意识到我已经对 CSS 文件进行了绝对引用。例如

/css/screen.css

通过删除第一个斜线 - 这使得对 CSS 文件的引用成为相对的，从而解决了问题。

HTML101.

正确打包 CSS 个文件以作为 Azure DevOps 扩展的一部分部署到 Azure CDN

Correctly packaging CSS files for deployment to Azure CDN as part of Azure DevOps extension

css

http-status-code-404

azure-devops

azure-devops-extensions