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

You just need to add a little more config, so where you are declaring your global variables, you need to wrap it up in :root{}. So in src/styles/settings/_variables.scss.

:root 
{
--blue: #00b; // or any global you wish to share with components 
}

Then when you use them in the SCSS you will need to access them like so.

.example-class {
  background-color: var(--blue)
}

To add to this regarding comments, this method can use mixins, @media and keyframes and is not limited to just colours / font. That was an example.

From my understanding you need a global file src/assets/style/global and then to import each scss file into there where you are defining them like so.

@import 'filename';

If you dont want global variables to be used in within a component look when you have the globals working. Look into ViewEncapsulation, as this can be used to ignore them.