Injecting global SCSS variables in Astro (https://astro.build), using additionalData and a path alias

astro.config.mjs

// note for typescript users: you will need to install node.js types into your project with `npm i -D @types/node`
import { fileURLToPath } from 'url';
import path, { dirname } from 'path';

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

export default {
  
  // all the usual config goes here...
  
  vite: {
    resolve: {
      alias: {
        '@/': `${path.resolve(__dirname, 'src')}/`
      }
    },
    css: {
      preprocessorOptions: {
        scss: {
          // path to your scss variables
          additionalData: `@import "@/styles/vars.scss";`
        }
      }
    }
  }
};

Thanks!

This snippet helped me, thanks!

God bless you! Exactly what I was looking for! 🥇

You, my friend, are a true scholar!!!!

👍

great thanks