Share Angular 5 variables with SCSS

Question

Right now I'm working on Angular 5 application for our 3 clients. We have made some of needed implementation but considering layout for them there is a problem. All three clients have different demands for application colors and fonts.

In my SASS file i have something like this:

//currently selected company
$currently-selected-company: company1; 
//here I set current brand but I want to make it load after rest response.
//There are default values for variables below so there won't be any null.

@if ($currently-selected-company == company1) {
   $current-header-text-color: $comp1-color;
   $logo-right-border-color: $comp1-color;
} @else if ($currently-selected-company == company2) {
   $logo-right-border-color: $company2-color;
} @else if ($currently-selected-company == company3) {
   $currently-selected-color: $company3-color;
   $current-header-text-color: $company3-color;
   $selection-color: $company3-color;
   $main-color: $company3-color;
   $logo-right-border-color: $company3-color;
}
//just few properties to visualize the problem

When the client will log in to the application special rest will load data to the application store which will hold currently selected company.

Here's my question: Is it possible to send angular viariable value to SASS so the proper colors and other things can be set right before it will process to CSS?

I'm not a front-end programmer so if there is any solution or tip I would be really thankful for it!

Code Lover · Accepted Answer · 2018-03-12 11:45:15Z

1

Please keep in mind this isn't exactly supported by the cli but rather a feature of Webpack.

Example of app.component.ts:

import {Component, OnInit, isDevMode} from '@angular/core';

@Component({
  selector: 'app-root',
  template: '<h1>Testing :)</h1>',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  ngOnInit(){
    if(isDevMode()) {
      require("style-loader!./../styles2.css");
    } else {
      require("style-loader!./../styles.css");
    }
  }
}
Where styles2:

h1 {
  color: red;
}
Styles:

h1 {
  color: green;
}

answered Mar 12, 2018 at 11:45

Code Lover

8731 gold badge13 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Macryo Over a year ago

Thanks for Your quick answer - I did implemented it earlier more or less like You did, but I was hoping there's more general solution which won't demand from me to make templates for whole app. Well thanks for the answer I'll then implement it like it was earlier.

tano · Accepted Answer · 2018-03-12 12:04:25Z

1

Css is compiled, so you cannot change. However generate all the themes and after login you can add a company specific class to the body.

answered Mar 12, 2018 at 12:04

tano

2,8271 gold badge18 silver badges17 bronze badges

Comments

neekheel · Accepted Answer · 2020-05-09 09:41:14Z

1

There is one more way, CSS has provided us a feature called var(), which allows us to runtime change properties of our CSS elements. It works in SCSS also. Check my blog for more details here, hope this will help you.

answered May 9, 2020 at 9:41

neekheel

1182 silver badges18 bronze badges

Collectives™ on Stack Overflow

Share Angular 5 variables with SCSS

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related