Use SCSS Variables Globally

[svemat01]

Adding SCSS variables globally is not something that is described in the docs. Using the traditional Astro ways does not produce a usable result.

<style is:global>
 @import '../path/to/file.scss'
</style>

---
import '../path/to/file.scss'
---

I remembered a solution for this from my experience with Sveltekit which is the following:

import { defineConfig } from "astro/config";

// https://astro.build/config
export default defineConfig({
    vite: {
        css: {
            preprocessorOptions: {
                scss: {
                    additionalData: '@use "src/styles/variables.scss" as *;',
                },
            },
        },
    },
});

This makes your scss variables everywhere. So now the question is whether this is something we would like to document.

If that's the case, I would gladly give it a shot.

Here's also a stackblitz for a sample setup. https://stackblitz.com/edit/github-zrgdij?file=src/pages/index.astro

[sarah11918]

Hey @svemat01, thanks for this!

This... looks like maybe a lot of configuration needed to do this? I'm going to tag @natemoo-re and the Technical Steering Committee on this one to see if this really is what we'd suggest to people. I don't know whether there's a simpler way to configure that Nate might have in mind, but I think we shoudl check before documenting this! So sit tight and we'll get some guidance on this.

[svemat01]

Sounds good, I'm excited to hear about any better solutions since this doesn't seem to trigger vite to reload variables on saving

[delucis]

As this is essentially a Vite configuration option, I think we can probably avoid documenting this in the Astro docs. In general we tend to encourage explicit imports (e.g adding @use "variables.scss" as *; to each .scss file or <style> block, but it’s nice to know this option is out there for people who need it.