У меня есть проект Rails 3.1, работающий отлично. Проблема в том, что мне нужно ссылаться на изображения в моем Sass, но Rails вычисляет URL-адреса изображений. (Это особенно важно при производстве, когда Rails добавляет хэш файл Git изображения к его имени файла для перебора кешей.)
Например, в app/assets/stylesheets/todos.css.scss:
.button.checkable { background-image: url(/assets/tick.png); }
Когда я развертываю (или запускаю rake assets:precompile), файл app/assets/images/tick.png перемещается в public/assets/tick-48fe85c0a.png или что-то подобное. Это нарушает CSS. Этот пост содержит два предложения:
public/images/ и обратитесь к ним напрямуюНомер 1 - это, конечно, возможность, хотя это означает, что я не получаю кэширование на своих изображениях. Номер 2 отсутствует, потому что я использую Sass, а не ERB для обработки файлов.
Следующее должно сделать трюк:
.button.checkable { background-image: url(image_path('tick.png')); }
Рельсы на самом деле предоставляют кучу помощников для ссылки на активы:
image-url('asset_name')
audio-path('asset_name')
В общем
[asset_type]-url('asset_name') #Becomes url('assets/asset_name')
[asset_type]-path('asset_name') #Becomes 'assets/asset_name'
asset_type может быть одним из следующих: образ, шрифт, видео, аудио, javascript, таблица стилей
sass-rails gem определяет функции Sass, которые могут использоваться от Sass без обработки ERB. https://github.com/rails/sass-rails
Для тех, кто выступает за более быстрое время загрузки для пользователей, могу ли я предложить следующий совет Стива Соудерса для загрузки изображений в CSS в base64.
активов данных URL ( 'путь')
Вариант варианта 2 будет работать. Если у вас есть что-то вроде этого:
app/assets/stylesheets/pancakes_house.css.less.erb
И вы require в свой application.css файл. Затем pancakes_house сначала проходит через ERB, и этот выход проходит через процессор LESS, и все, что выходит из этого, входит в ваш CSS. Ввод ERB внутри вашего SCSS может показаться немного странным, но, эй, он будет работать и выполнять работу без излишней странности.
Итак, вы должны иметь возможность получить необходимые методы для создания путей кэш-распаковки изображений через ваш ERB.
Я только пробовал это с файлом Less, но он также должен работать с .css.scss.erb.
В качестве альтернативы вы также можете добавить свои собственные функции в SASS:
Методы в этом модуле доступны из контекста SassScript. Например, вы можете написать
$color = hsl(120deg, 100%, 50%)и он вызовет
Sass::Script::Functions#hsl.
Есть даже некоторые инструкции по написанию собственных функций чуть дальше в руководстве. Однако я не уверен, как заставить Sprockets загружать ваши патчи Sass::Script::Functions, поэтому я не могу назвать это практическим решением; кто-то с более сильным Sprocket Fu, чем я, мог бы заставить этот подход работать, хотя я бы назвал это более элегантным, чем ERBified SCSS.
Вы можете легко использовать номер 2, просто добавьте расширение .erb в файл .scss:
app/assets/stylesheets/todos.css.scss.erb
и используйте метод asset_path, чтобы получить путь к изображению с хешем:
.button.checkable { background-image: url('<%= asset_path 'tick.png' %>'); }
этот файл будет обработан erb, а затем sass.
При использовании конвейера ресурсов пути к активам должны быть переписаны, а sass-rails предоставляет помощники -url и -path (переносимые в Sass, подчеркнутые в Ruby) для следующих классов активов: изображение, шрифт, видео, аудио, JavaScript и таблицы стилей.
image-url ( "rails.png" ) возвращает url (/assets/rails.png) image-path ( "rails.png" ) возвращает "/assets/rails.png"
Можно также использовать более общую форму:
asset-url ( "rails.png" ) возвращает url (/assets/rails.png) resource-path ( "rails.png" ) возвращает "/assets/rails.png"