🦔

Sassで指定したスタイルが反映されないときの原因と解決法

に公開
Docker
Laravel
PHP
Sass
tech

Laravel × Sass を使っているときに、Sassで書いたスタイルが反映されず「検証ツールで確認しても変化が見えない」という経験はありませんか？
今回は、背景色を #ccc に変更したのに反映されなかったケースを例に、原因と解決までの流れを解説します。

🐛 発生した問題

Sassファイルに以下を記述しました。

.example__exampleitem__hoge__huga {
    background-color: #ccc;
}

ところが、ブラウザの検証ツールでは background-color: #fff; のままで、#ccc の指定が表示されませんでした。

🔍 原因調査

最初に以下を実施しましたが改善しませんでした。

  • Laravelのキャッシュクリア
php artisan view:clear
php artisan cache:clear
php artisan config:clear
  • Sassの再ビルド
npm run dev
npm run watch

→ 改善せず。

✅ 効果があった方法

最終的に、ブラウザで Cmd + Shift + R（ハードリロード） を行ったところ、Sassの変更が反映されました。

📝 なぜハードリロードで直ったのか

ブラウザが古いCSSファイルをキャッシュしており、新しいスタイルを読み込んでいなかったためです。
LaravelやVite環境では、ビルド後のCSSがキャッシュされやすいため注意が必要です。

📌 まとめ

  • npm run dev や npm run watch では改善せず、ハードリロードで解決
  • 原因は ブラウザキャッシュ による古いCSSの読み込み

困ったときは、まず ビルド済みCSSに目的のスタイルが出力されているか を確認し、効かないときはハードリロードを試してみましょう。

Discussion