I am migrating a React app to Svelte. The React app does not scope its CSS; everything is in one stylesheet made from a few dozen SCSS files. This stylesheet is only 8 kb so I would like to use it as a global SCSS file in my Svelte/SvelteKit app.
There is a long discussion about global styles in the sveltekit repo but I wasn't able to find the solution there.
According to that discussion, it seems the SCSS import should be done in the global +layout.svelte
.
So I added the following lines:
<style lang="scss"> @import '../assets/css/AppGlobal.scss';</style>
I then built the app with npm run build
; there were several warnings about unused CSS selectors, but the build completed.
Then I checked the app with npm run preview
and my compiled SCSS is not loaded anywhere (not at the /
path).
What do I need to do to get SCSS working globally? This is my first day with Svelte.
Svelte 4 and SvelteKit 2.