Global scss variables for Angular components without importing them everytime

I do already have SCSS variables defined in src/styles/settings/_variables.scss and I am importing them into src/styles.scss, but still these variables aren't available for every single component.

Is there any way to make a global file which holds all SCSS variables for the rest of my components? Because writing @import in every single component .scss file it is very frustrating, especially if I have many nested components.

I know, there is a lot of similar questions, but it seems like they're all outdated and do not relate to the recent versions of Angular.

I use Angular 7.3 with CLI.

Continue reading...