title: Angular SCSS Global Variable Import
body: <p>I would like to move over to SCSS in my Angular project. So far the only use I want from SCSS is the variables. At the moment I have been using CSS variables which work very nicely because you declare them in <code>:root</code> in my styles.css and then you can use them in all the components' CSS files in the app.</p>
  
  <p>My question is whether this is possible with SCSS (a global import)? Because I find it very tedious to move from a language that imported globally by it self (CSS) to something that now requires me to import variables wherever I need it (SCSS).</p>
  
  <p>I am a bit disappointed on why a better version of something would require me to do this. Therefore I am sure there must be some way to not have to import my variables in every SCSS I need them in.</p>
  
  <p>For example, I want to create variables in my styles.scss, and then I want to be able to use those variables in any of my components' styles, without importing anything. In CSS variables like <code>--MyVar</code> in <code>:root</code> is accessible from any components' CSS.</p>