【実録】Vue + Vite プロジェクトで「console.log だけ動いて他の変更が反映されない」原因がCSSの警告だった話

はじめに

こんにちは。
今回は、Vue.js + Vite で開発している最中に遭遇した、ちょっと厄介な現象を共有します。

「console.log() は更新されるのに、なぜかコードの他の部分が更新されない」
「npm run build しても反映されない」
…そんな不可思議な症状にハマりました。

結果として原因は「CSS の構文エラー（しかも警告レベル）」でした。
赤いエラーではなく黄色い Warning だったのがポイントです ⚠️

🧨 発生した現象

開発中、threadHead 関数などを修正してビルドしたのに、
なぜかアプリ上では古い動作のまま。
ですが console.log() だけはなぜか更新されている。

たとえば：

console.log('after', threadHead)
upsertIDB(threadHead, 'threadHead', 'parentID', threadHead.parentID);

console.log('after', ...) の内容は最新に変わっているのに、
upsertIDB() の動作は以前のまま…。

最初はキャッシュかな？と思い、

npm run dev の再起動
ブラウザキャッシュ削除
node_modules の再インストール
などをしても変化なし。

結果、npm run build が実際にコードを更新していなかった ことが判明しました。

🔍 ビルド時の出力ログ

✓ 962 modules transformed.
rendering chunks (2)...warnings when minifying css:
▲ [WARNING] Unexpected "*" [css-syntax-error]

    <stdin>:36:17:
      36 │ #edit_new, #edit_* {
         ╵                  ^

dist/index.html

このように「赤いエラー」ではなく、「黄色い警告」しか出ていませんでした。
しかし、この1行が すべての原因 でした。

💣 原因の正体：CSSの構文エラー

問題の箇所：

#edit_new, #edit_* {
  display: none;
}

この #edit_* は、意図としては「#edit_ から始まるIDをまとめて指定したい」というものでした。
ですが、CSSの構文上、#edit_* は 無効なセレクタ です。

CSS では #edit_* のような「ワイルドカードをID内に使う」書き方はできません。
正しくはこう書く必要があります👇

[id^="edit_"] {
  display: none;
}

(^= は「〜で始まる」という意味の属性セレクタ)

⚙️ なぜCSS警告でビルド結果が壊れたのか？

Vite（または esbuild / css-minify）は、ビルド時にCSSもまとめて最適化（minify）します。
このとき、構文エラーがあると内部で minify が途中停止し、
結果として JavaScript 側の出力が途中で止まることがあります。

つまり、
「CSS の警告が原因で JS の minify が中断」
→ 「出力された dist/ 内の JS が一部古いまま」
→ 「でもコンソールログだけは再生成されていた」
という微妙な状態になっていました。

✅ 対応方法

CSSセレクタを修正する：
```
[id^="edit_"] {
  display: none;
}
```
その後に再ビルド：
```
npm run build
```

出力ログを確認：

✓ 962 modules transformed.
✓ built in 1.53s

これで完全に最新のコードが反映されるようになりました 🎉

💡 教訓

黄色い警告でも油断しない！
特にCSSの Unexpected "*" や構文エラーは、JSのビルドにも影響することがあります。
console.logが動いても油断できない！
一部のモジュールだけが再トランスフォームされている可能性があります。
Vite / esbuild はCSSエラーで途中停止することがある
→ ビルド完了の「✓」だけでは安心できない。

🧰 今後の対策

CI/CDやローカルスクリプトに --log-level=warn を付ける
```
vite build --logLevel warn
```
→ 警告も強調表示して気付きやすく。

CSS構文チェッカー（stylelint）を導入

npm install stylelint stylelint-config-standard --save-dev
npx stylelint "**/*.css"

ビルド出力ログを常に最後まで確認する習慣をつける
特に「warnings when minifying css」は要注意！

🧭 まとめ

状況	原因	対処
console.logだけ更新される	CSS minify警告でJS出力が途中停止	CSS修正＋再ビルド
赤いエラーではなく黄色いWarning	`Unexpected "*"` の構文エラー	セレクタを `[id^="edit_"]` に修正
再起動しても変化なし	npm buildが正常完了していなかった	ビルドログを必ずチェック

🎯 最後に

このトラブル、地味にハマります。
特に「console.logは動いてるからコードは更新されてるはず」と思い込みやすいのが落とし穴です。

👉 もしあなたも「コードが反映されない…」と感じたら、
まずはビルドログの警告（黄色）を見直す！
これで救われること、意外と多いです💪

登録日：2025-10-13

更新日：2025-10-13

by プログラマーこまつ

コメント tweetでコメント