与SCSS共享Angular 5变量 [英] Share Angular 5 variables with SCSS

问题描述

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

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.

在我的SASS文件中，我有类似以下内容:

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.

这是我的问题:是否可以向SASS发送角度可变值，以便可以在将其处理为CSS之前设置适当的颜色和其他内容?

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!

推荐答案

请注意，cli并不完全支持此功能，而是Webpack的功能.

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

app.component.ts示例:

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

这篇关于与SCSS共享Angular 5变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！