How to add SCSS? about astro-minimal-starter

[jaydanurwin]

Hi there, great question! For future reference this is more of a question I'd recommend asking in Astro's Discord server. They even have a #support channel for questions like this too! It's free and I've had nothing but positive experiences with everyone on there. Here's the link to join https://astro.build/chat

I think I can help with this though. So since you're wanting to do variables globally through SCSS I would recommend creating a src/styles directory and putting your SCSS files in there. Then you could do something like <link rel="stylesheet" href={Astro.resolve("INSERT_RELATIVE_PATH.scss")} in your BaseLayout file. This would add those files globally and let Vite compile the SCSS to CSS.

Sidenote, I've personally moved away from using SCSS variables now that CSS variables are widely available in all major browsers. They are cross compatible inside SCSS as well which makes it an easy transition. I still understand the need for mixins and other SCSS features but variables seem to be something that most people are doing in vanilla CSS now.

Hope that helps!