【rails】ページごとにCSSを当てたい。
こんにちは、マリンです。
知人に頼まれてHTML、CSS、JSのみの完全静的Webサイトを作ったのですが、
このたび機能追加に伴いRails化することにしました。
それまでのコードはペペッと貼り付けてちょこちょこっと修正すればいっかなぁ〜
なんて軽く考えておりましたが、そこはさすがプログラミング。
そう甘くはないですよねぇ・・・
まだまだ色々試行錯誤中ですが、ひとまず今回解決しました、
CSS周りの適用の仕方を書きます。
私はcustom.scssしか知りません
Rails Tutoialでは、それぞれのスタイルを順番に読み込むのは大変！
ということでcustom.scssのみでスタイリングしておりました。
しかし今回、ページごとにスタイルをつけてしまったんですよね。
ダブってるスタイルを別々にし直すのも手ですが、
できればそんな面倒なことはしたくありません。
そこでこちらでもやはり分けた部分はそのまま分けることにしました。
ここで問題になるのは、
これまでごっそりスタイル当ててたcustom.scssしか知らないということです。
個別にスタイルを当てる方法を知らなかったんですね。
問題1：適用の仕方
もちろん最初そのままのコードを使っていましたから、
Viewでの指定の仕方が
<link rel="stylesheet" href="stylesheets/home.css">
なんてことになっていました。
当然うまくいかないわけで、
そこで思い出したのがapplication.cssにあるアレでした。
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
あ。これだ！と思ってapplidationの部分をhomeに変更してみました。
問題2：precompile
assets.rb
上記だけで実行しようとすると次のようなエラーが出ます。
ActionView::Template::Error (Asset was not declared to be precompiled in production. Add `Rails.application.config.assets.precompile += %w( home.css )` to `config/initializers/assets.rb` and rest art your server):
注意された通りなんですが、
config/initializers/assets.rb
にある
Rails.application.config.assets.precompile += %w( home.css )
この一文のコメントアウトを外して、
( )の中に対象となるCSSなどのファイル名を入れます。
precompile
これでもまだ不十分です。
再読み込みしても同じエラーが出ると思います。
更新を反映させるためにはプリコンパイルが必要になります。
ターミナルで以下の処理を行ってください。
$ rails assets:precompile # もしくはrake assets:precompile
最後にサーバーを再起動させれば完了です。
＊これをお忘れなきよう。私は数分困惑しました・・・
まとめ
ここまでやってきた処理は、
「Asset Piplineのコンパイル対象を追加する」という作業になるそうです。
へぇ〜と流してきたAsset Piplineですが、いい機会なので勉強してみてもいいかもです。
とはいえ、これやるとページの読み込みが遅くなるようなので、
やはりスタイルなんかは一つのファイルにまとめた方が良さそうです。
今回はこちらを参考にさせていただきました。
