Search code examples
sasssveltesveltekit

How can I add a global SCSS file to Svelte / SvelteKit?

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.

Solution

  • 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.)