# Fix VS Code Live Server Not Reloading CSS Changes Automatically

You are developing a web application with VS Code's Live Server extension, but CSS changes do not appear in the browser until you manually refresh. HTML changes reload fine, but CSS updates are ignored. This defeats the purpose of live reloading.

Step 1: Verify Live Server Is Running

Check the status bar for the Live Server indicator. It should show "Port: 5500" (or your configured port). Click it to open the browser, or use:

bash
Open with Live Server

From the status bar or Command Palette.

Step 2: Check File Injection

Live Server injects a JavaScript snippet into HTML files to enable live reloading. If your HTML file does not get this injection, CSS changes will not trigger reloads.

Verify injection by checking the page source in the browser (Ctrl+U). Look for:

html
<script src="/livereload.js?snipver=1"></script>

If this script is not present, Live Server is not injecting properly. Common causes:

Minified HTML Files

Live Server cannot inject into minified HTML files that lack proper closing tags. Ensure your HTML has a closing </body> tag:

html
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Hello</h1>
</body>
</html>

The injection happens just before </body>. If the tag is missing, injection fails.

Live Server monitors CSS files referenced via <link> tags. If you use @import in CSS or inline <style> tags, Live Server may not detect the changes:

```html <!-- Good: Live Server monitors this --> <link rel="stylesheet" href="styles.css">

<!-- Bad: Live Server may not detect @import changes --> <style> @import url('styles.css'); </style> ```

Always use <link> tags for stylesheets you want live-reloaded.

Step 4: Configure Watched File Extensions

Live Server watches specific file extensions by default. Verify your CSS files have a standard extension:

json
{
    "liveServer.settings.watch": [
        "**/*.css",
        "**/*.html",
        "**/*.js"
    ]
}

If you use SCSS or Less, Live Server watches the source files but the browser needs the compiled CSS. Configure Live Server to watch the compiled output:

json
{
    "liveServer.settings.watch": [
        "**/*.css",
        "**/*.html",
        "**/*.scss",
        "**/*.less"
    ],
    "liveServer.settings.delay": 100
}

The delay setting adds a 100ms delay before reloading, giving the SCSS compiler time to finish.

Step 5: Proxy or CDN Interference

If your CSS is loaded from a CDN or through a proxy, Live Server cannot detect changes:

html
<!-- Live Server CANNOT monitor this -->
<link rel="stylesheet" href="https://cdn.example.com/styles.css">

For local development, use local file paths:

html
<link rel="stylesheet" href="./styles.css">

Step 6: Browser Cache

The browser may be caching the old CSS file, making it appear that Live Server is not working. Force-reload the browser once:

bash
Ctrl+Shift+R  (Chrome/Firefox)
Cmd+Shift+R   (macOS)
  1. 1.Or disable cache in browser DevTools:
  2. 2.Open DevTools (F12)
  3. 3.Go to Network tab
  4. 4.Check "Disable cache"

Step 7: Multiple Workspace Folders

In a multi-root workspace, Live Server may be watching the wrong root folder. The server root is determined by the file you right-click to open with Live Server.

Ensure you open the file from the correct workspace folder:

bash
File > Open Folder > Select the folder containing your HTML file

Not the parent directory.

Step 8: Live Server Settings

Complete recommended configuration:

json
{
    "liveServer.settings.port": 5500,
    "liveServer.settings.root": "/",
    "liveServer.settings.CustomBrowser": "chrome",
    "liveServer.settings.NoBrowser": false,
    "liveServer.settings.AdvanceCustomBrowserCmdLine": "",
    "liveServer.settings.ChromeDebuggingAttachment": false,
    "liveServer.settings.donotShowInfoMsg": true,
    "liveServer.settings.donotVerifyTags": false,
    "liveServer.settings.host": "127.0.0.1",
    "liveServer.settings.ignoreFiles": [
        ".vscode/**",
        "**/*.scss",
        "**/*.sass",
        "**/*.map"
    ],
    "liveServer.settings.fullReload": false,
    "liveServer.settings.delay": 100
}

Set fullReload: true if CSS-injected updates cause visual glitches. This forces a full page reload instead of CSS injection.

Step 9: Alternative: Use BrowserSync

If Live Server continues to have issues, use BrowserSync as a more robust alternative:

bash
npm install -g browser-sync
browser-sync start --server --files "*.css, *.html, *.js"

BrowserSync provides more reliable file watching and cross-device synchronization.