VSCode拡張によるファイル保存時自動整形の影響で、ViteのホットリロードがバグってCSSが空になった話

こんにちは、よしです。 先日、Vite デビューをしたところ思わぬ現象に遭遇してしまいました...。 せっかくなので、その対応方法とともに記録を残します。 要約 さらっと結論だけ知りたい方向けに、先に結論を書いておきます。 VSCode 拡張の Autoprefixer を導入している + ファイル保存時にこの拡張の自動整形を動作させている ↓ Vite のローカルサーバを立ち上げてコードを書いている ↓ Vite の（CSS ファイル保存時の）ホットリロードが時折バグって、生成物の CSS の中身が空になってしまうことがある ↓ Vite と Autoprefixer を併用する場合は、Autoprefixer を VSCode 拡張として動作させるのでなく、PostCSS として Vite 側で実行してもらうようにしようね！ ちなみに当記事では Vite についての説明は特にしません。