Considering a transition to SCSS within my Angular project, I am primarily interested in utilizing the variables feature. Currently, I have been relying on CSS variables, which are conveniently declared in :root in my styles.css file and can be accessed in all component-specific CSS files across the application.
My query pertains to whether it is possible to implement global imports for SCSS (similar to what is achievable with CSS)? It seems cumbersome to shift from a language that inherently allows global importing (CSS) to one that necessitates variable imports each time they are needed (SCSS).
The idea that an improved version would mandate additional steps like this leaves me feeling somewhat let down. I am confident there must be a way to avoid having to import variables individually into every SCSS file where they are required.
For instance, I aim to define variables in my styles.scss file and seamlessly utilize them in any component's stylesheet without requiring explicit imports. In CSS, variables like --MyVar declared in :root are readily accessible from any component's CSS.