AssetPipelineでcssに画像指定

またもやAssetPipelineにやられてました。

症状

cssに記述した画像がrailsで表示されなくなった

clobberしてprecompileしたら表示されなくなりました。

該当部分はpage.css.scssというファイルに以下のように記述されていました。

.frame #title{
    height:91px;
    background-image: image-url("picture.png");
    background-repeat:repeat-x;
    color:#FFF;
}

ここで、image-urlはrailsのヘルパーで、ハッシュ値が付加された画像を表示できるようにするものです。

原因

sassコンパイルした事

sassコンパイルした事が原因でした。コンパイル先のpage.cssを見ると、image-urlがそのままでした。cssの記法としてimage-urlはないのでここでエラーとなっていました。

解決

page.cssを削除

page.cssを削除したら問題なく表示されるようになりました。

app/assets/application.cssにscssファイルを追加する際はどのように書けばいいか少し迷ったのですが、page.css.scssの場合も普通に

*= require page

でいいみたいです。

参考

railsguides.jp

パーフェクトRuby on Rails