Пути изображений в CSS для поддержки CDN

Я пытаюсь развернуть наши изображения в cdn. В настоящее время css имеет относительные пути к изображениям на нашем сайте. Эти пути должны поддерживать местоположение изображения CDN. Кто-нибудь есть советы о том, как я могу это сделать?

Или, если у кого есть хороший учебник по развертыванию в CDN.

Вот как я закончил это.

  • Я использовал SASS - http://sass-lang.com/
  • У меня есть mixin cdn.scss с контентом, например $image_path: "/images/";
  • Импортировать этот микс в стиле sass @import "cdn.scss"
  • Обновить пути изображения как таковые: background: url ($ image_path + "image.png" );
  • При развертывании я изменяю переменную $image_path в mixin.scss, а затем повторно запускаю sass

ОБНОВЛЕНИЕ

Мы используем bash для обновления файла

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

Пример кода в _cdn.scss

$image_path: "/public/images/";

Затем он работает по умолчанию локально, но при нажатии на производство мы запускаем bash script для обновления с использованием местоположения cdn

Ответы

Ответ 1

Вероятно, самым простым было бы разместить как ваши изображения, так и файл CSS на CDN. Пути изображений в вашем файле CSS относятся к самому CSS файлу, поэтому вам вообще не придется менять свой CSS.

Если это не вариант, вы застряли, добавляя полностью настроенные URL-адреса в таблицу стилей. Теперь, если вы действительно этого хотели, вы могли бы генерировать свой CSS файл динамически "на лету" и выполнять некоторую замену, чтобы на самом деле вам не пришлось жестко кодировать CDN на вашем листе.