从组件构造函数（不是装饰器）动态包含 .scss - Angular 4答案

【问题标题】：Include .scss dynamically from component constructor (not decorator) - Angular 4从组件构造函数（不是装饰器）动态包含 .scss - Angular 4
【发布时间】：2018-09-28 20:59:42
【问题描述】：

我需要使用 Angular Material 主题在 Angular 4 中应用自定义主题，其主要和强调色是从数据库中获得的。为此，我在 styles.scss 中添加类以应用主题，例如：

.light-red-pink {
     $custom-app-primary: mat-palette($mat-red);
     $custom-app-accent: mat-palette($mat-pink);
     $custom-app-theme: mat-light-theme($custom-app-primary, $custom-app-accent);
     @include angular-material-theme($custom-app-theme);
}
.light-lime-blue {
     $custom-app-primary: mat-palette($mat-lime);
     $custom-app-accent: mat-palette($mat-blue);
     $custom-app-theme: mat-light-theme($custom-app-primary, $custom-app-accent);
     @include angular-material-theme($custom-app-theme);
}

但是，我必须添加许多类（超过 300 个类和 2000 行代码）来应用所有可能的主题，这导致我的项目加载非常缓慢。我考虑将这些类分成单独的 .scss 文件，但我还有一些问题：

是否可以将 .scss 文件动态包含到组件中？

另外，如何避免加载这么多样式？

【问题讨论】：

标签： angular typescript sass angular-material2

【解决方案1】：

我找到了解决办法！对于包含 .scss 文件，我必须在组件的构造函数中添加这一行：

require('style-loader!./path/to/my-theme.scss');

应用自定义主题：

/** Constructor */
constructor(
    private themeService: ThemeService
) {
    const pathTheme = this.themeservice.getPath();
    require('style-loader!' + pathTheme);
}

仅此而已！

【讨论】：