Angular 6 style.scss not globally applied into the components

Question

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 https://i.stack.imgur.com/UlWYY.jpg

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

 "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",

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 : https://scotch.io/tutorials/using-sass-with-the-angular-cli still not working.

Answer 1

The best approach to achieve this, is creating a variable file and import this file in your scss files.

Like so:

@import "../../variables.scss";

or

@import "~variables.scss";

And in your styles.scss you just put a reference of your variable file!

Answer 2

If it's correct that you used the --style=sass option on project init, then that might be the problem. If you intend to use .scss files (which I would recommend), then you should have used --style=scss.

To fix this now, you can run the command ng set defaults.styleExt scss.

Answer 3

the answer was to simply add the full path to the component.scss like so, @import "src/sass/~variables.scss"; instead of just @import "~variables.scss";