Nuxtでスタイルが反映されない時は.nuxtフォルダを削除する

結論

Nuxt開発中にCSSの変更がブラウザに反映されない場合、以下の手順で解決できる。

# 1. 開発サーバーを停止（Ctrl+C）

# 2. キャッシュフォルダを削除
rm -rf .nuxt .output

# 3. 開発サーバーを再起動
pnpm dev

ブラウザのハードリフレッシュ（Ctrl+Shift+R）だけでは解決しないことがある。

症状

同じ localhost:3002 にアクセスしているのに、ブラウザによって表示が異なる状態が発生した。

• 自動テスト用Chrome: 最新のスタイルが適用されている
• 通常のブラウザ: 古いスタイルのまま

具体的には、タブバーの背景色やレイアウトが異なっていた。

原因

Nuxtは開発時に .nuxt フォルダにビルドキャッシュを保存する。このキャッシュが古い状態のままだと、ソースコードを変更してもビルド結果に反映されないことがある。

特に以下のような場合に発生しやすい。

• CSSの大幅な変更を行った時
• コンポーネントの構造を変更した時
• 開発サーバーを長時間起動したままにしていた時

解決手順

1. 開発サーバーを停止

ターミナルで Ctrl+C を押してサーバーを停止する。

2. キャッシュフォルダを削除

# .nuxt と .output の両方を削除
rm -rf .nuxt .output

Windowsの場合はエクスプローラーから手動で削除してもよい。

3. 開発サーバーを再起動

# pnpmの場合
pnpm dev

# npmの場合
npm run dev

# yarnの場合
yarn dev

4. ブラウザをリロード

サーバーが起動したら、ブラウザで通常のリロード（F5）を行う。

ブラウザのハードリフレッシュだけでは不十分な理由

ブラウザのハードリフレッシュ（Ctrl+Shift+R）は、ブラウザ側のキャッシュをクリアする。しかし、Nuxtのビルドキャッシュはサーバー側（.nuxtフォルダ）に存在するため、ブラウザのキャッシュクリアでは解決しない。

[ソースコード] → [.nuxt (ビルドキャッシュ)] → [ブラウザキャッシュ] → [表示]
                    ↑ ここが古いとダメ           ↑ ここだけクリアしても不十分

まとめ

Nuxt開発中にスタイルが反映されない場合は、以下の順で対処する。

1. まずブラウザのハードリフレッシュ（Ctrl+Shift+R）を試す
2. それでも直らなければ、開発サーバーを停止して .nuxt フォルダを削除
3. サーバーを再起動してブラウザをリロード

この手順で、キャッシュ関連の問題は解決できる。