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!
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;
}