開発環境でもアセットファイル名にフィンガープリントが付与されるなどでうまく表示できない
追記:
すみません。お恥ずかしいのですが、アセット周りを試し終えた結果、根本的にHTMLにミスがあることに気づきました。
app/assets/images/hoge.pngを置きました。
拡張子が.css.scss
のファイルに、
background-image: image-url('hoge.png');
と記述し、ChromeのDeveloper Toolsで確認したところ
background-image: url(/assets/hoge-5c6df45c1cb3ef12bc11fb1dae8261db9737b142d46985f6a44ed1c0fbd62831.png);
と /assets/hoge-フィンガープリント.pngという形になっており
フィンガープリントが付与されたファイル名の画像がそもそもないので取得できないのかと思いましたが、本来欲しいのは、app/assets/images/ ディレクトリなのでimages/ が足りないと思い、
background-image: image-url('images/hoge.png');
と書き換えたところ、今度はフィンガープリントが付与されず、加えて、images/ が2つも入ってしまいました。
background-image: url(/images/images/hoge.png);
仕方がないので、app/assets/hoge.pngにも同様にファイルを置いてみましたが、同様に表示されません。
そもそも.css.scss
ファイルもDeveloper Toolsで確認したところフィンガープリントが付与されたCSSファイルに変換されているようで、変換されたものをlinkタグでアクセスしにいっているようです(このCSSファイルはうまく読み込めている模様。なぜならbackground-color
を試しに指定したとき色はついたので)。
<link rel="stylesheet" media="all" href="foobar.self-3ca83820f3dd876e282a5295e5e27e4de51ac6a62b5bb8812844fbef484ca67f.css?body=1" data-turbolinks-track="true" />
正しいscssの書き方を教えて下さい。
追記:
development.rbを
config.assets.debug = true
config.assets.digest = false
にしたところ、CSSやJSファイルへのダイジェストの付与はなくなりましたが、以前として、
background-image: url(/assets/hoge-ダイジェスト)
の状態でした。
development.rbを
config.assets.debug = false
config.assets.digest = false
にすると、今までapp/assets/stylesheets配下に置いていたcss.scss
ファイルが勝手にCSSへ変換され、その変換されたファイルへのlinkタグが自動でERBに挿入されていましたのですが、linkタグが生成されなくなり、そもそもCSSへアクセスできなくなりました。