Visual Studio CodeでFTP simple使用時にライブプレビューで躓いた点

コーディングは主にVisual Studio Codeを使用して、常にFTP Simpleでサーバー上のコードを同期しながら作業を進めております。

これまでは、コードを書き終えたら保存する、そしてブラウザでF5更新して確認ｓる、という手順を取っていましたが、Visual Studio CodeのプラグインにHTMLのプレビュー機能があるとのこと。

Preview on Web Server - Visual Studio Marketplace https://marketplace.visualstudio.com/items?itemName=yuichinukiyama.vscode-preview-server

Extension for Visual Studio Code - Preview Web Page on Web Server.

早速これを導入してみたものの、何故かプレビューにスタイルシートが反映されていません。
コードやCDN読み込みした他のスタイルシートやJavaScriptは反映されるというのに。

パスが違うのか？いや、サーバーのファイルを確認しても特に問題は無い。

おかしい。

そこでFTP Simpleでローカルに同期ファイルとして保存しているファイルを確認してみる。
すると何故かcssの容量が0。
中身を確認すると、何も入ってない。

ここでようやく合点が行く。

つまり、FTP Simpleはファイルがバッティングしないように、該当ファイルを開いた際に自動で最新のファイルをサーバーからダウンロードして、ファイルを閉じるとローカルのファイルの方は中身が空になってしまうと。

プレビューではcssは読み込んでいたけれど、それは中身が無いものであったと。

それで、該当するcssを開いた状態でプレビューすると、きちんと反映されて確認することが出来ました。