Global scss variables for Angular components without importing them everytime

Question

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

Answer 1

Is there any ways to make global file with scss variables available for all components?

Without importing global file everytime in each component, you want those sass variables been available, it's not possible.

The way it works in SASS, if using partials to better organize code, you can apply @import directive for referencing. So if there're some sass variables in shared/_variables.scss:

$lightslategray: #778899;
$darkgray: #A9A9A9;

and these variables need to be used in another stylesheet, stylesheet with them must be @import-ed into it firstly:

// Shared
@import "shared/variables";

.content {
  background: $lightslategray;
}

In Angular it works in a similar way (related referencing external stylesheet). So if you need some sass variables, mixins or functions to be used by a particular component.scss, there is no other clean way, but to reference them in that component.scss using @import directive. To ease the task, you can create a file src/_variables.scss and use syntax like this in your component.scss:

@import “~variables.scss”;