CloudFront提供的CSS文件未呈现

Question

这是一个奇怪的问题，但我认为我已经在线路的某个地方做了一些事情，以结束目前的情况。

尝试从CloudFront提供静态文件（images，css＆amp; js）时，它们似乎无法正常呈现。例如，我的一个样式表可以在这里找到：http://d21uvxjmc903qz.cloudfront.net/stylesheets/hf.4fabc9c719f8.css，但它似乎并没有像我期望的那样“应用”到DOM。 （例如，在Firebug中查看Chrome或Firefox中的开发人员工具时，相关样式不会应用于<header>元素。

查看响应标题，看起来Content-Type设置正确，所以我几乎没有想法。

关于下一步要去哪儿的建议？

Answer 1

问题可能是S3存储桶中的内容类型错误。我遇到了同样的麻烦，并且更改内容类型修复了问题。我将以下内容从text/plain更改为text/css，然后正确呈现了样式。

Answer 2

对我而言，链接不能是http，但必须是https：// .. 当我修改这个时它对我有用

<link rel="stylesheet" href="w3.css">

在html文件中：

<link rel="stylesheet" href="https://s3.amazonaws.com/yourFolder/w3.css">

希望有所帮助。

Answer 3

我们认为无法正确提供云端口提供的CSS文件存在问题。该问题最终成为背景网址值中未转义的单引号。

background: url(//xxxxx.cloudfront.net/img/flags48/Cote%20d'Ivoire.png) no-repeat}

我们将'替换为%27后，CSS问题已修复。

background: url(//xxxxx.cloudfront.net/img/flags48/Cote%20d%27Ivoire.png) no-repeat}

Answer 4

我正在使用Hugo渲染我的网站。我发现我需要在baseURL的值中指定HTTPS协议，而不仅仅是路径。

例如，在文件config.toml中：

baseURL = https://example.com

或在命令行上

hugo --baseURL https://example.com

戴上帽子，+ 1 @pascati，这使我想到了这个Hugo解决方案。