背景と対象
usersコントローラを作成したときに生成された、app/assets/users.scssに記述したscssが反映されない。つまりはアセットパイプラインの仕組みが適用されていない状況になってしまっている状況。全部app/assets/application.scssに書けばcssの適用は出来ますがめっちゃ見ずらいのでやめた方がいいです。このような状況でつまっている方の役に立てればと思い書きました。ちなみにアセットパイプラインについては以下のページがおすすめです!
https://diveintocode.jp/blogs/Technology/AssetPipeline
解決方法
とっても簡単です!
app/assets/application.scssのコメントアウトの最下部に*= require_selfとrequire_tree を以下のように追加してください。それぞれのコードの意味はコード内に書いてあります。ちなみにこれらの順番はどっちでもよく、require_selfを先に書けばapplication.scssが先に読み込まれます。後に書けばapplication.scss以外のscssファイルが先に読み込まれます。
app/assets/application.scss
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets,oranyplugin's
* vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You'refreetoaddapplication-widestylestothisfileandthey'llappearatthebottomofthe*compiledfilesothestylesyouaddheretakeprecedenceoverstylesdefinedinanyotherCSS/SCSS*filesinthisdirectory.Stylesinthisfileshouldbeaddedafterthelastrequire_*statement.*Itisgenerallybettertocreateanewfileperstylescope.**=require_self まずはこのファイルを読み込むという記述追加!*=require_treeapp/assets以下のcssファイルを読み込んでいる 追加!*/
}
これでアセットパイプラインの仕組みを利用して分かりやすく、すっきりしたコードが書けます!