为 Angular 2 应用程序实现可插件 CSS 主题的最佳方式是什么？ 推荐的文件结构是什么？目前我正在使用由 angular-cli 生成的那个。
【问题讨论】：
标签： css angular themes angular-cli
我们有几种方法可以给组件添加样式：
内联样式：
@Component({
templateUrl: 'test.html',
styles: [`
.card {
height: 20px;
width: 80px;
}
`],
})
使用外部样式表：
@Component({
styleUrls: ['css/mystyle.css'],
templateUrl: 'test.html',
})
CSS 导入：
@import 'hero-details-box.css';
组件样式也有来自 shadow DOM 样式范围的特殊选择器。例如可能有一个 CSS 主题类应用于文档：
:host-context(.theme-light) h2 {
background-color: #eef;
}
作为一种常见做法，将组件的代码、HTML 和 CSS 拆分为同一目录中的三个单独文件：
quest-summary.component.ts
quest-summary.component.html
quest-summary.component.css
请访问Component styles了解更多信息。
如果您想进一步增强它并使用 SAS，请访问ANGULAR2 SASS 了解更多详情。
styleUrls: ['./sassexample.component.scss']
如果您想为 UI 组件使用库，请查看以下内容：
希望这会有所帮助。
干杯！！
【讨论】：
Angular cli 内置了对 css 预处理器的支持，例如 sass 和 less，它们非常适合 css 主题。如果您专注于如何通过 less/sass 制作主题然后如何在 angular 中制作主题，这个问题会得到更好的解决
我会建议在您的根元素上为您的根组件使用以下内容：
app.component.html
<div [ngClass]="theme">
<div class="widget">TEST</div>
</div>
app.component.ts
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
encapsulation: ViewEncapsulation.None // this allows parent styles to influence children
})
export class AppComponent implements OnInit {
public theme: string;
constructor() {}
public ngOnInit(): void {
this.theme = ... some logic to set theme here ...
}
}
app.component.scss
.theme1 {
.widget {
background-color: red;
}
}
.theme2 {
.widget {
background-color: blue;
}
}
【讨论】：