CSS not loading in Sveltekit

I am converting a website from Nuxt to Sveltekit.

Everything works well locally but when I push the code to Github and deploy on Netlify, there is a problem with styling:

  • styling only partially loads;
  • …scoped CSS from components and pages partially loads;
  • …styling from global.css does not load; and
  • …custom font (via global.css) does not load.

Again, everything works fine and looks good locally.

Global stylesheet:

  • saved at src > styles > global.css
  • linked in head of app.html file:

No errors or issues seen in build logs.

Dev site: https://awesome-einstein-9ff17c.netlify.app

This is what it should look like (running locally):

Grateful for any assistance / suggestions…

Hi @turtlefeet

The src directory is that where your app source is built from. The Svelte Docs contains a files section outlining where certains files are placed in the project. Static files such as CSS that don’t require building are put in the assets directory and are then linked relative to the root (/) so that your global.css is then accessed as /global.css.

2 Likes

Thanks! Issue resolved. I moved ‘global.css’ to ‘static’ folder and changed path to ‘/global.css’ and it now displays as expected.

1 Like

Glad everything is working for you now :netliconfetti: Thanks @coelmay for the great debugging explanation here!