Hello, I'm a beginner when it comes to using AstroJS. In my project structure, there is a folder named styles inside the src folder. Inside this folder, there is a file called global.scss where I have defined some global SCSS variables in HEX format:
/* SCSS HEX */
$aquamarine: #44ffd1ff;
$pomp-and-power: #8d6a9fff;
$space-cadet: #1a1b41ff;
$argentinian-blue: #5da9e9ff;
$burnt-sienna: #ee6c4dff;
In my project, I also have an index page located within the layouts folder. My question is, how can I access these global SCSS variables in my pages or layout components? Initially, I tried importing the global.scss file at the top of my component like this:
import '../styles/global.scss';
However, when attempting to use the color variables defined in global.scss, it seems that they are not working as expected. I thought I could simply utilize these variables in my style tags like so: background-color: $aquamarine;