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

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.

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>