SvelteKit - How to make SCSS variables/mixins globally available to all components?

Question

In Nuxt, I use the Style Resources package to make SCSS available globally and I can access variables and mixins in any component. How to do the same in SvelteKit?

Answer 1

You should make the stylesheet available to the whole application. Personally I am using svelte-preprocess.

To do this, just set some parameters in the svelte configuration file (svelte.config.js), asking to import a certain file into each sub stylesheet of your components.

import preprocess from 'svelte-preprocess';

const config = {
    preprocess: preprocess({
        scss: {
            prependData: `@import './src/style/app.scss';`
        }
    })
    ...
};

Then inside app.scss you can import any other file, for example _variables.scss where you are going to put all the global variables that need to be shared.

Answer 2

For my case I creed a folder with differents files with varibles (for exemple colors.sccs etc.) in folder src and I imported it to main css file app.scss like this on the top of file:

@use "./colors";

and I imported app.scss in __layout.svelte after that I can use my variables ans maximes in each component like this where I write my style:

<style lang="scss">
   @use "./colors";
   
   .myClass {
      color: colors.$myColor
   } 

</style>