现在我正在为我们的 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 之前设置正确的颜色和其他内容?
我不是前端程序员,所以如果有任何解决方案或提示,我将非常感激!
最佳答案
请记住,这并不是 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;
}
关于css - 与 SCSS 共享 Angular 5 变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49234023/