与 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

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

这是我的问题：是否可以将角度可取值发送到 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;
}

Answer 2

css 是编译的，所以你不能改变。但是，生成所有主题，登录后，您可以将公司特定的类添加到正文中。

Answer 3

还有一种方法，CSS 为我们提供了一个名为 var(( 的功能，它允许我们在运行时更改 CSS 元素的属性。它也适用于 SCSS。查看我的博客以获取更多详细信息 这里，希望这对您有所帮助。