Firefox isn't refreshing CSS upon saving file & using Live Server Extension but Chrome does

15 Views Asked by At

I'm using Visual Studio Code and running the Live server extension. When I save my CSS file, it will only show the changes after I manually refresh my Firefox window, but for the HTML file it refreshes on save automatically. On the other hand Chrome shows the changes upon saving for both HTML and CSS files. Is there a way to fix this so that Firefox shows CSS changes automatically?

Also, I'm running basic HTML and CSS, no frameworks or node modules.

I've tried toggling Full refresh but it didn't make a difference.

I also have the Firefox live server web extension.

I am calling the CSS from the HTML file as shown below:

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css" />
</head>

The only thing I am doing differently, is I have a folder within my css folder called sections, where I import every section CSS into the style.css file. The file structure is as shown:

Project
├── assets
│   ├── asset1
│   ├── asset2
├── css
│   ├── sections
│   │   ├── sec1.css
│   │   ├── sec2.css
│   │   ├── sec3.css
│   ├── style.css
├── index.html
0

There are 0 best solutions below