追加したカードが本番だけ崩れていました——ビルドのキャッシュが原因で、3回目でした

Knowledge ページの並び順を「読む→見る→使う→買う」に変え、Instagram のリール3本を紹介するセクションを追加しました。ところが公開直後、本番だけ表示が崩れていました。

何が起きたか

• PC でもカードが縦に並ばず、横並びのまま
• 画像の文字が切れる
• 画像の左下に重ねた再生数の表示が見えない

手元のプレビューでは正しく表示されていました。本番の CSS を調べると、今回新しく使ったスタイルの指定が1つも含まれていませんでした。

どう直したか

本番のビルドが、前回のビルド結果（キャッシュ）を復元して CSS を使い回していたのが原因でした。手元でキャッシュを消してビルドすると、必要なスタイルはすべて生成されます。

最初は CSS の入口ファイルの中身を少し変えて作り直させましたが、それでは解消しませんでした。そこで、本番のビルドでは毎回キャッシュを消してから組み立てる設定に変えました。ビルドは毎回少し長くなりますが、小規模なサイトなので実害は小さいと判断しています。

学び

この現象は7月に1回目が起きていて、今回で3回目でした。そのたびに「その場しのぎ」で直していたことになります。

手元で正しく見えることと、本番で正しく見えることは別です。見た目を変えたときは、本番の CSS に新しいスタイルが入っているかまで確認してから「直った」とするようにしました。