How to add SCSS?

[freakyshine]

Hey, I've watched your video and read through the repository and some of the official documentations, but couldn't really tell how to properly implement SCSS files.
For example, I would like to have variables.scss and for every component it's .scss file.
How do I implement such a thing?

[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!