Vscode-live-server: CSS file doesn't load

[Icomanman]

Hi!
I am running live-server to quickly see changes in my web page trials. Changes in html are reloaded well. However, it appears that the CSS file does not load. If I use the "file://" on the browser, it works just fine.

[rjoydip]

Have you tried this option liveServer.settings.fullReload?

[Icomanman]

Thanks for your comment. No, I haven't tried this one...sorry but, I don't know exactly how to implement that. Would you mind to guide me through?

[rjoydip]

For Mac use (cmd+,) or for Windows and Linux use (ctrl+,) find liveserver.settings.fullReload and replace default false to true

[ritwickdey]

appears that the CSS file does not load

What do you mean by this? Any error? Or live reload is not working?

[rjoydip]

@Icomanman Is this issue solved? Please give us your feedback.

[rjoydip]

duplicate #85

[Icomanman]

Thank you for your responses...
I tried running the search (ctrl+,) but I can't find the entry liveserver.settings.fullReload. I also tried changing it to live-server etc...
I am running the node live-server via the integrated terminal in VS Code.

[rjoydip]

@Icomanman Check this one

`liveServer.settings.fullReload` : By Default Live Server inject CSS changes without full reloading of browser. You can change this behviour by making this setting as true.

Default: false

[rjoydip]

@Icomanman fullReload should be there.

[rjoydip]

@Icomanman Are you still facing this issue?

[Icomanman]

Hi rjoydip, unfortunately, I still do... I really can't find the liveServer.settings, or any of it. Even if I put it straight into the user settings, I get a message that it is an unknown configuration.

However, I am curious, is there any other liverserver out there that we might be talking of two different things? I had setup the liveserver through npm install.

[Shema05]

@Icomanman,go settings ,open command pallete and type in full reload,you will get the option.

[Shema05]

Hi, have the same problem too,I've tried the above option but still no change;some help, I'm stranded trying any other option .
I'm using;
Windows10;
latest Chrome;
and latest VS Code
thanks

[Nemachtilli]

Enter file-preferences-configuration

open configuration.json

add the following:

"liveServer.settings.ChromeDebuggingAttachmen": true,
"liveServer.settings.useLocalIp":true,
"liveServer.settings.fullReload":true,
"liveServer.settings.port": 8080,

save Changes and close vs code.

open again vs code and check if the CSS works.

It worked for me

I work for me because of the following: the default settings are false

En español el archivo de ccs no carga en live server
1.-Abrir archivo-preferencias-configuración (imagen 1)
2.-Abrir configuracion (imagen 2 cuadro rojo)
3.-Agregar lo siguiente:

"liveServer.settings.ChromeDebuggingAttachmen": true,
"liveServer.settings.useLocalIp":true,
"liveServer.settings.fullReload":true,
"liveServer.settings.port": 8080,
4.- guardar cambios.
5.- salir de vs code.
6.-Abrir vs code y verificar si funciona.

Me funciono a mi por lo siguiente: las configuraciones están por defecto en false.

Viva México y mi presidente Andrés Manuel Lopez Obrador saludos

[henriquetbp]

Enter file-preferences-configuration

open configuration.json

add the following:

"liveServer.settings.ChromeDebuggingAttachmen": true,
"liveServer.settings.useLocalIp":true,
"liveServer.settings.fullReload":true,
"liveServer.settings.port": 8080,

save Changes and close vs code.

open again vs code and check if the CSS works.

It worked for me

I work for me because of the following: the default settings are false

En español el archivo de ccs no carga en live server
1.-Abrir archivo-preferencias-configuración (imagen 1)
2.-Abrir configuracion (imagen 2 cuadro rojo)
3.-Agregar lo siguiente:

"liveServer.settings.ChromeDebuggingAttachmen": true,
"liveServer.settings.useLocalIp":true,
"liveServer.settings.fullReload":true,
"liveServer.settings.port": 8080,
4.- guardar cambios.
5.- salir de vs code.
6.-Abrir vs code y verificar si funciona.

Me funciono a mi por lo siguiente: las configuraciones están por defecto en false.

Viva México y mi presidente Andrés Manuel Lopez Obrador saludos

This worked for me! Thanks @Nemachtilli

[m1ghtyju4n]

Enter file-preferences-configuration

open configuration.json

add the following:

"liveServer.settings.ChromeDebuggingAttachmen": true,
"liveServer.settings.useLocalIp":true,
"liveServer.settings.fullReload":true,
"liveServer.settings.port": 8080,

save Changes and close vs code.

open again vs code and check if the CSS works.

It worked for me

I work for me because of the following: the default settings are false

En español el archivo de ccs no carga en live server
1.-Abrir archivo-preferencias-configuración (imagen 1)
2.-Abrir configuracion (imagen 2 cuadro rojo)
3.-Agregar lo siguiente:

"liveServer.settings.ChromeDebuggingAttachmen": true,
"liveServer.settings.useLocalIp":true,
"liveServer.settings.fullReload":true,
"liveServer.settings.port": 8080,
4.- guardar cambios.
5.- salir de vs code.
6.-Abrir vs code y verificar si funciona.

Me funciono a mi por lo siguiente: las configuraciones están por defecto en false.

Viva México y mi presidente Andrés Manuel Lopez Obrador saludos

Hi I did all of this and still have the same problem, CSS still wont load, I am using Live Server v5.6.1, VSCode on Linux Mint.

[gvirus21]

hey guys , looks like I found an another Fix. I don't know it will work for everyone or not but hear me out.

My Problem :- live server loads html file perfectly but doesn't load the css with it. But my linking was right. And without live server my page loads fine.

I am on latest version of windows 10 Home edition , version 2004
and my VS code version is 1.52

My Solution :-
so I usually copy path of the css file by right clicking on it and paste it on html.

ex :-

I didn't put much attention in that as that is syntactically correct and without liveserver , my page seems to work fine.

But to make liveserver work, you have to paste only name of the css file (Assuming that you have all html and css files are in same location).

ex :-

then just try to refresh,
It should Start loading css again .