Sass-rails: при неправильном создании путей изображения; `url (/images/blah.png)` вместо `url (/assets/blah.png)`

В раздел 2.2.2, "CSS и Sass" , мне сказали положить image-url('delete.png') в мой sass. И поэтому у меня есть.

Однако он генерирует CSS как

background-image: url(/images/delete.png)

вместо того, что мне говорят повсюду, он должен генерировать, правильную и очевидную вещь,

background-image: url(/assets/delete.png)

Что. Черт.

Я провел буквальные дни, пытаясь понять, откуда это происходит.

Здесь суть соответствующих настроек, которые приводят к такому поведению. Здесь суть тех же файлов в более ранней версии нашей базы кода (сразу после того, как мы реализовали конвейер активов и фактически работали около недели до того, как появилось это неприятное поведение). Можете ли вы определить различия? Любые другие файлы, о которых вы можете подумать, могут быть причиной этого?

Примечание

Мы намеренно используем более старую версию sass-rails, потому что более новая версия вызывала ошибки Stack level too deep! при предварительной компиляции.
Мы используем Compass.

Два хакерских попытки обходных решений

Потому что на самом деле устранение неполадок с конвейером ресурса отстойно.

1: Поместить изображения в /images

Я попытался просто переместить все изображения в public/images и добавить это как путь загрузки. Это работало в dev (изображения доступны либо в /assets, либо /images), но предварительная компиляция для создания помещает отпечатки пальцев только в /assets (obvs), поэтому, когда sass-rails помещается в url(/imagse/delete-120398471029384102364.png), он может " t.

2: Сделать /public/images символической ссылкой на /public/assets

Это, вероятно, будет работать в процессе производства, но в разработке папка /assets не существует, поэтому директивы url(/images/delete.png) приводят к необоснованным образам.

Ответ 1

Если у вас этого нет, назовите свой css файл *.css.scss (в отличие от .sass - если вы это сделаете, вам может потребоваться настроить синтаксис некоторых операторов). Затем используйте image_path помощник вместо image-path, например:

background-image:url(image_path('delete.png'));

Я ожидаю, что это решит вашу проблему. Если это не так, каков путь актива, сгенерированный этим подходом для вас?

Ответ 2

Это связано с вашей версией sass-rails (3.1.0). Я могу воспроизвести вашу проблему (спасибо за публикацию Gemfile), и она уходит, когда натыкается на sass-rails 3.1.4.

Попробуйте выполнить обновление до 3.1.4 и очистку tmp/cache. Также убедитесь, что вы не попадаете в кеширование браузера.

Я знаю, что вы сказали, что 3.1.4 вызывает другие проблемы... вы пробовали более высокие версии?

Ответ 3

Это действительно выглядит так: https://github.com/rails/sass-rails/issues/57 Если это так, вы должны попытаться найти хорошее сочетание версий между Compass и Sass-rails.

И, возможно, обновить все (включая Rails) до последних версий, это по-прежнему лучший способ сделать (используйте команду bundle outdated в bundler 1.2, чтобы узнать, что Gems для обновления)

Ответ 4

Это наша комбинация haml-рельсов, компаса и сассовых рельсов. Однако мы используем рельсы 3.2.6. Это хорошо сработало для нас.

gem 'compass', git: 'git://github.com/chriseppstein/compass.git', ref: '3a4c5c75dca9f07f6edf2f0898a4626269e0ed62'

gem 'haml-rails', git: 'git://github.com/indirect/haml-rails.git', ref: '92c41db61f20a9f122de25bc73e5045cfccdbcd5'

gem 'sass-rails', '~ > 3.2.5'

Ответ 5

Не обязательно решение, но, безусловно, доступный вариант. Если вы открыты для использования написания компаса, вы сократите количество HTTP-запросов и сможете вручную указать путь к изображению с помощью спрайт-карты, т.е. '$ sprites: sprite-map ( "PATH/*.png" );'

Ответ 6

Проверка работоспособности файла в вашей текущей платежной линии. Убедитесь, что он находится в одном из перечисленных ниже каталогов:

<%= debug Rails.application.config.assets.paths %>

Затем проверьте, какой относительный компас пути ожидает найти изображение (и посмотрим, будет ли он соответствовать. Согласно Compass config docs, один из они должны сказать вам:

<%= debug config.compass.http_images_path %>
<%= debug config.compass.http_generated_images_path %>

Я предполагаю, что это первый. В любом случае, сравните свой путь с вашим изображением: путь к ресурсу:

<%= debug asset_path 'delete.png' %>

Если пути не совпадают, возможно, вам нужно настроить путь в своих конфигурациях среды (development.rb,...) к этому, например:

config.compass.http_images_path = '/assets.

В качестве альтернативы вы можете переместить изображение туда, где http_images_path или http_generated_images_path ожидает его поиска.

В данный момент мы, надеюсь, будем работать с активом_path/asset_url (который намного менее хрупким, чем hardcoding). Я основывал это на подобной технике, которую я видел для таблиц стилей,

Ответ 7

Для меня

Изменение image_path до image-path работало для .scss. Позже я снова изменился на image_path, и теперь он отлично работает.

Удаление кеша не помогло мне.

Ответ 8

После того, как я отредактировал мой .scss файл (добавленный пробел) и перезагрузил страницу, я получил правильный результат. После того как я удалил пространство, он работал правильно.