Global scss variables for Angular components without importing them everytime

css angular sass global-variables angular7
Vladimir Humeniuk picture Vladimir Humeniuk · Mar 12, 2019 · Viewed 29.4k times · Source

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.

Answer

Dince12 picture Dince12 · Mar 13, 2019

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.

Related questions

Angular-cli from css to scss

I've read the documentation, which says that if I want to use scss I have to run the following command: ng set defaults.styleExt scss But when I do that and make that file, I still receive this error in …

Read More
How to use Angular 4 with SASS

I'm starting my first project using Angular4 and sass and I'm trying to figure it out how to work with sass the proper way. I'm using angular-cli and already set the default style to use scss syntax. I also already …

Read More
Using scss as default style sheet in Angular 6+ (styleExt)

Apparently the way to declare the default stylesheet extension changed from Angular 6 onwards. The styleExt property in the angular.json is not recognised any longer. For new projects this can be set with an option on the CLI --style=scss …

Read More