LoginSignup
0
0

More than 3 years have passed since last update.

Railsで個別にCSSを適用させる方法

Posted at

結論

config/initializers/assets.rbに
'Rails.application.config.assets.precompile += %w( user.css )'
を追加することで解決した。
いろいろ調べてもわからなかったが、エラーが出たときの指示に従ったら解決したので、赤い文字がたくさん出てきても焦らずに対処すれば問題ないということがわかった。

背景

htmlやcssの勉強は対してしていなかったものあり、デザインをいじることに抵抗があった。
そんなとき、Bootstrapが便利だと職場のエンジニアの方々からきき、デザインに全く手が回っていないサービスにBootstrapの実装を試みた。

Bootstrapをいろいろ探していると無料のテーマというのがあることを知った。
元々ワードプレスでブログを書いていたことがあったので、ワードプレスのテーマと非常に似ているなと感じた。

Bootstrapのテーマを探すとサイト丸ごとをデザインできるようなものもあったが、Bootstrapについてよくわからないし、せっかく実装したslickを使ったJQueryの動きに影響が出ても嫌なので、作ってすらいなかったログインページをまず作り、そのページにだけBootstrapのデザインを反映させようとした。

苦悩

htmlのページにcssを読み込む方法は知っていたつもりだったが、user.scssというscssファイルの読み込みがどうしてもできずにいた。
同じcssのコードをapplication.scssに貼り付けるとサイト全体に反映されてしまうが、これだとちゃんとログイン画面もお洒落なデザインになっていた。
どうにかしてログイン画面にのみデザインを反映させたいと思い、いろいろ調べてみたが、compileがどうとか、
= require_tree . と= require_selfの順番がどうとかがたくさん出てきて、困った。
諦めてteratailで質問をするためにどのようなエラーが出ているのかを確認しようと、htmlに読み込みのためのコードを書き、ブラウザで確認した。
すると
「Asset was not declared to be precompiled in production.
Add Rails.application.config.assets.precompile += %w( user.css ) to config/initializers/assets.rb and restart your server」と丁寧に書いてあり、
言われた通りに丸々コピーしてassets.rbに記載したのち、リスタートするとログイン画面だけお洒落になった。
ファイルはscssなのに、なんでcssなのだろうと思いながら、scssに変更してサーバーを起動させたが、問題なく立ち上がった。cssとscssにはそんなに違いはないんだろうと勝手に解釈して終わった。なんとかうまくいってよかった。

学び

プログラミングを初めてから作業中の癖になっていたことが2つあり、1つはエラーが出たりわからなかったりするとすぐに調べるようになったこと。もう一つがteratailで誰かに助けを求めようとすることだった。が、そもそもどんなエラーなのか、しっかり突き詰めていないと調べて出てきた解決策が自分の課題とマッチしているのか判断ができないし、teratailで質問するにしても質問された側も状況の把握がうまくできない、何よりエラーの説明に答えがある場合がある、ということを今回の経験から学んだ。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0