Share Angular 5 variables with SCSS

问题:

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!

回答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;
}

回答2:

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.