学習40日目 cssから学んだこと

こんにちはKATUUUNです。
本日もオリジナルアプリの開発を続けていました。
新規投稿画面を作成した時、気づいた箇所をアウトプットします

本番環境で背景画像が表示されない

cssで見た目を整えて、さあデプロイするぞ！意気込んだ後、

背景画像が消えていました。

• 原因

Asset Pipelinという仕組みが関係しているとわかりました。

webブラウザで処理できるリクエスト数には限りがあるため、javascriptやcssのアセット（railsでapp配下にあるやつ）を最小化または連結するためにAsset Pipelinというフレームワークが働いているらしい。

その「最小化または連結」するときに画像のファイル名に拡張子が追加され、ファイル名が変わるらしい。

• 対策

cssファイルをscssファイルにしてimage-urlメソッドを使いました。

変更前

background-image: url('try.png');

変更後

background-image: image-url('try.png');

これで本番環境で背景画像が表示されました。