如何配置VS Code Live Preview实现WordPress style.css编辑自动刷新？

Live Preview扩展本身是为本地静态文件预览设计的，它无法直接监听远程服务器上的文件变更并触发浏览器刷新——这就是你遇到问题的核心原因。以下是几个可行的解决方法：

方法一：使用Browser Sync（推荐） #

Browser Sync专门用于监听文件变化并同步刷新浏览器，支持远程服务器场景：

1. 确保远程服务器已安装Node.js，然后全局安装Browser Sync：

   npm install -g browser-sync
   

2. 进入你的WordPress主题目录（包含style.css的文件夹），运行以下命令（替换成你的站点域名）：

   browser-sync start --proxy "your-site-domain.com" --files "style.css"
   

3. 命令执行后，Browser Sync会生成一个代理地址（比如http://localhost:3000），在浏览器中打开这个地址。此后每次保存style.css，浏览器都会自动刷新。

方法二：配置VS Code远程文件监听+浏览器刷新扩展 #

1. 确保你使用的是VS Code的Remote - SSH或Remote - WSL扩展连接远程服务器，且files.autoSave设置为afterDelay（加速文件同步）。
2. 安装File Watcher扩展，配置它在style.css保存时触发刷新动作：
   • 打开扩展设置，添加新规则：
     • 文件匹配：**/wp-content/themes/你的主题名/style.css
     • 触发动作：可通过curl调用Browser Sync的刷新API，或配合浏览器端的Auto Refresh插件实现页面刷新。

方法三：利用WordPress后台实时预览 #

进入WordPress后台的「外观」→「自定义」面板，在这里修改主题CSS（或编辑style.css后切换到预览界面），大部分主题会提供实时预览功能，修改后无需手动刷新即可看到变化。

排查可能的操作失误 #

• 你是否用Live Preview打开了本地的style.css文件？Live Preview默认加载本地文件，而非远程站点页面，这种情况下自然不会同步远程修改。必须确保浏览器打开的是远程站点的实际页面，而非Live Preview生成的本地预览地址。

内容的提问来源于stack exchange，提问作者radionowhere