主婦がアプリをリリースするまでの軌跡

自宅でお小遣い稼ぎをしたい主婦がアプリリリースを目指すブログです。

【rails】ページごとにCSSを当てたい。

f:id:song-of-life1352607:20170220105406j:plain

こんにちは、マリンです。

知人に頼まれて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ですが、いい機会なので勉強してみてもいいかもです。

とはいえ、これやるとページの読み込みが遅くなるようなので、

やはりスタイルなんかは一つのファイルにまとめた方が良さそうです。

今回はこちらを参考にさせていただきました。

RailsでAsset Pipelineのコンパイル対象を追加する by 42 Design Work

RailsでCSS(スタイルシート)を読み込みたい | Ruby on Railsサービス開発逆引き辞典