CSS not loading in Sveltekit

Support
,
1

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):

Website - Styled
Website - Styled1701×4716 348 KB

Grateful for any assistance / suggestions…

2

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
3

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

1 Like
4

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