SCSS theming with variables (by @intellix )

You have a component called Header that you want to share across apps like so:

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss'],
})
export class HeaderComponent implements OnInit { ... }

It has a SCSS file, which uses variables for things like colouring/spacing:

@import 'src/scss/variables';

:host {
  display: block;
  padding: $spacer-y $spacer-x;
  background: $bg;
}

...But now you realise that those variables were not brand/app specific and you need to be able to override those based on the app/brand. I've found that you can achieve this like:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "apps": [
    {
      "name": "coca-cola",
      "stylePreprocessorOptions": {
        "includePaths": [
          "coca-cola/scss"
        ]
      },
    },
    {
      "name": "pepsi",
      "stylePreprocessorOptions": {
        "includePaths": [
          "pepsi/scss"
        ]
      },
    }
  ]
}

Now you just change the import references throughout to:

@import 'scss/variables';

And now depending on the app you're serving, the variables change inside your base/shared components