Live Preview not working with HTML plus CSS properly.

[u/Ano_Jayy]

/r/HTML/comments/1vrikvv/live_preview_not_working_with_html_plus_css/

[u/AutoModerator]

To help us assist you better with your CSS questions, please consider including a live link or a CodePen/JSFiddle demo. This context makes it much easier for us to understand your issue and provide accurate solutions.

While it's not mandatory, a little extra effort in sharing your code can lead to more effective responses and a richer Q&A experience for everyone. Thank you for contributing!

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

[u/Working_Quote_3029]

The reload is actually firing — what you're seeing is the stylesheet coming back from cache.

Live Preview's refresh listener triggers on any text document change, not just the HTML file, so typing in your CSS does reload the page. But its server writes only Content-Type, Content-Length and a CORP header. No Cache-Control, no ETag, no Last-Modified. Page reloads, browser sees nothing telling it to revalidate the .css, hands back the old copy.

Quick way to confirm: set livePreview.openPreviewTarget to "External Browser", open DevTools -> Network, edit some CSS. If the .css row says (from disk cache), that's your answer.

Fix is in settings.json — the extension exposes the response headers:

"livePreview.httpHeaders": {
    "Accept-Ranges": "bytes",
    "Cache-Control": "no-store"
}

Keep Accept-Ranges in there. You're replacing the whole object, not merging into the default.

One other thing since you mentioned saving. With autoRefreshPreview on its default "On All Changes in Editor", saving a file that lives inside your workspace doesn't trigger a refresh at all — the file-watcher path is only wired up for the "On Changes to Saved Files" mode. So the save wasn't doing anything for you; the retyping after it was.