CSSが反映されない時の解消法

HTMLファイルにCSSが適用されなかったので、その解消法の説明になります

HTMLのファイルにCSSが適用されなく、SCSSのファイル内のクラスや入れ子構造の間違いがないかを確認したところ、間違ってる箇所はありませんでした。

次にimport先のapplication.scss内のファイルを見たところ、

application.scss

@import './index';
@import './config/reset';

reset.scssのファイルより上に、HTMLファイルに当てるscssファイルを先にコードを書いたことにより、先にindex.scssファイルが読み込まれ、その後にreset.scssファイルが読み込まれリセットされていました。

application.scss

@import './config/reset';
@import './index';

基礎の基礎であるコードは上から読み込まれるというのを失念したことが原因でした。

application.scssに他のscssファイルをインポートする際は、リセットファイルや変数を定義したファイルを先に記述して、その後にHTMLファイルに当てるscssファイルを記述するようにしていきます。

さいごに

基礎は大事!
わかってるつもりにならないこと!