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.
Would import it in the <script>, otherwise it is scoped by default and all rules that do not apply in the current component are removed.
<script>
import '../assets/css/AppGlobal.scss';
</script>
(There are some ways to unscope in the style using :global, but it might require pre-processing.)