Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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ファイルを記述するようにしていきます。

さいごに

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

merumeru
運命に導かれて集まった多彩な5人の特攻野郎が日替わりで日々の学びをアウトプット。時には本当に特攻、爆散するなんてことも!(プログラミング内で)
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away