css - 与 SCSS 共享 Angular 5 变量

Question

现在我正在为我们的 3 个客户开发 Angular 5 应用程序。我们已经完成了一些需要的实现，但考虑到它们的布局存在问题。三个客户对应用程序的颜色和字体都有不同的要求。

在我的 SASS 文件中我有这样的东西:

//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

当客户端登录到应用程序时，特殊休息会将数据加载到将保存当前选定公司的应用程序商店。

这是我的问题:是否可以将 Angular 变量值发送到 SASS，以便在它处理为 CSS 之前设置正确的颜色和其他内容？

我不是前端程序员，所以如果有任何解决方案或提示，我将非常感激!

Answer 1

请记住，这并不是 cli 完全支持的，而是 Webpack 的一个特性。

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