#css #image #relative-path #asset-pipeline
#css — файл #изображение #относительный путь #конвейер активов #css
Вопрос:
У меня есть некоторая библиотека js в комплекте с css и изображениями.
в assets/ stylesheets/awesome-library/awesome-library.css мы видим что-то вроде
background-image: url("some-image.png")
если мы напишем в нашем макете это:
<%= stylesheet_link_tag "awesome-library/awesome-library" %>
Браузер будет извлекатьhttp://example.org/assets /потрясающаябиблиотека/some-image.png
Но если нам потребуется awesome-library / потрясающая библиотека в нашем приложении.css:
//= require awesome-library/awesome-library
Браузер будет извлекатьhttp://example.org/assets /некоторые-image.png (404, конечно)
Я попытался переписать awesome-library.css в scss (используя image-url), но в результате css url выглядит как /assets/some-image.png . Я не хочу объединять изображения библиотеки и все другие изображения и, действительно, не хочу изменять код библиотеки.
Ответ №1:
Просто используйте @import "awesome-library/awesome-library.css"; в своем приложении.css
Комментарии:
1. Хороший ответ, но… Мне нужно добавить awesome-library.css в список компиляции ресурсов, также браузер действительно получит 2 файла css (и поэтому нет реальной разницы между моей реализацией с использованием
stylesheet_link_tagи вашей)2. Разница в том, что мое решение никоим образом не изменяет html. Требуется всего один дополнительный HTTP-запрос. Но чего вы на самом деле хотите достичь?
3. Мне нужен способ реализовать агрессивное кэширование (чтобы пользователь загружал только один файл , и пока какой-либо из css не будет изменен, пользователь не будет отправлять новые запросы для css на сервер). Также в вашей идее нет отпечатка пальца в имени файла css, поэтому я не могу сказать пользователю «эй, сохраняйте этот файл в течение следующих 100 лет и не извлекайте его снова». (Но да, я могу реализовать отпечаток пальца в application.css.erb, используя что-то вроде
@import "<%= asset_path("awesome-library/awesome-library.css")%>";). Поэтому в настоящее время я использую этот способ (@import asset_path), спасибо вам. Но будет лучше, если мы сможем инкапсулировать весь css в один файл.