title: Angular 6 style.scss not globally applied into the components
body: <p>I created a new cli project with --style=sass and then defined some variables in the src/sass/styles.scss (no partials created) so they should be globally defined right? , so when i tried to use them in home.component.scss i got this error  <a href="https://imgur.com/a/IckJL14" rel="nofollow noreferrer">https://imgur.com/a/IckJL14</a></p>
  
  <p>i then added a black border just to make sure normal css works and it did work , the problem is with sass ,
  here's the angular.json </p>
  
  <pre><code> "styles": [
            "src/sass/styles.scss",
            "./node_modules/bootstrap/dist/css/bootstrap.min.css",
            "./node_modules/malihu-custom-scrollbar- 
             plugin/jquery.mCustomScrollbar.css",
            "./node_modules/animate.css/animate.min.css",
  </code></pre>
  
  <p>edit: i then created a partial _variables.scss and in the component.scss i wrote @import '~sass/variables'; after importing them in the styles.scss like so @import './variables'; according to the guide from this link : <a href="https://scotch.io/tutorials/using-sass-with-the-angular-cli" rel="nofollow noreferrer">https://scotch.io/tutorials/using-sass-with-the-angular-cli</a>
  still not working.</p>