2011-10-03 23 views
9

Este es un problema extraño, pero supongo que he hecho algo descabellado en algún lugar de la línea para terminar con esta situación actual.Archivos CSS servidos en CloudFront no representados

Al tratar de mostrar archivos estáticos (imágenes, css & js) de CloudFront, parece que no se están procesando correctamente. Por ejemplo, una de mis hojas de estilo está disponible aquí: http://d21uvxjmc903qz.cloudfront.net/stylesheets/hf.4fabc9c719f8.css, pero no parece "aplicada" al DOM como era de esperar. (Por ejemplo, mirando en las herramientas para desarrolladores de Chrome o Firefox Firebug en los estilos pertinentes no se aplican al elemento <header>.

En cuanto a las cabeceras de respuesta, parece que el Content-Type se ajusta correctamente, así que estoy bastante gran parte de las ideas.

Cualquier sugerencia acerca de dónde buscar la próxima?

+0

¿Tiene un enlace al sitio usándolo? –

+0

Supongo que lo incluirá en su HTML en [la forma correcta] (http://www.htmldog.com/guides/cssbeginner/applyingcss/). – Alex

+0

Bastante seguro de que lo incluyo de la manera correcta, estoy usando Django y el único cambio es la URL a la que me refiero. (Por ejemplo, se envió desde mi máquina local, no hay problemas, se sirve fuera de la nube, actúa de manera extraña.) – philipk

Respuesta

9

el problema es probable que el tipo de contenido incorrecto en el depósito de S3. yo tenía el mismo problema, y ​​cambiar el tipo de contenido ha solucionado el problema Cambié el siguiente de text/plain a text/css y luego los estilos representados correctamente.

enter image description here

+0

Estaba teniendo el mismo problema y esto lo solucionó. –

+0

¡Gracias TimDog! Resolvió un problema de 2 horas o más para mí. ¡Tu eres el hombre! – ac360

0

Acabo de tener un problema con un archivo CSS servido desde la nube que pensamos que no se ha publicado correctamente. El problema terminó siendo una cita única no escapada dentro del valor de la URL de un fondo de pantalla.

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

Una vez que sustituye ' con %27, se fijaron los problemas de CSS.

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

Para mí el enlace no podría ser http, pero tuvo que ser https: // .. Se trabajó para mí cuando he modificado este

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

en el archivo html en esto:

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

espero que ayude.

Cuestiones relacionadas