Chemins d'images en CSS pour prendre en charge CDN

Question

J'essaie de déployer nos images sur un CDN. Actuellement, le CSS a des chemins relatifs aux images sur notre site. Ces chemins devront prendre en charge l'emplacement de l'image CDN. Quelqu'un at-il des conseils sur la façon dont je peux faire cela?

Ou si quelqu'un a un bon tutoriel sur le déploiement d'un CDN.

---

C'est ainsi que j'ai fini par accomplir cela.

1. I utilisé SASS - http://sass-lang.com/
2. J'ai un mixin appelé cdn.scss avec un contenu comme image_path de $: "/ images /";
3. Importer ce mélange dans le style sass @import "cdn.scss"
4. Mettre à jour les chemins d'image en tant que tels: background: url ($ image_path + "image.png");
5. Le déploiement Je change la variable image_path de $ dans le mixin.scss puis exécutez à nouveau SASS

MISE À JOUR

Nous utilisons bash pour mettre à jour le fichier

cat > preprocess/sass/_cdn.scss <<EOT 
\$image_path: "//CDN_URL/"; 

code exemple dans le _cdn .scss

$image_path: "/public/images/"; 

Ensuite, cela fonctionne par défaut localement , mais en production push, nous exécutons le script bash pour mettre à jour en utilisant l'emplacement cdn

Answer 1

Probablement la chose la plus simple serait d'héberger à la fois vos images et votre fichier CSS sur le CDN. Les chemins d'image dans votre fichier CSS sont relatifs au fichier CSS lui-même, vous n'aurez donc pas besoin de modifier votre CSS.

Si ce n'est pas une option, vous êtes bloqué en mettant les URL complètes dans votre feuille de style. Maintenant, si vous le souhaitez vraiment, vous pouvez générer votre fichier CSS de façon dynamique à la volée, et effectuer un remplacement afin de ne pas avoir à coder en dur le CDN dans votre feuille.