Question

我需要使用Angular Material主题在Angular 4中应用自定义主题，主要颜色和重点颜色是从DB获得的。为此，我在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文件包含到组件中？

或者，我怎样才能避免加载这么多样式？

Answer 1

我找到了解决方案！对于include .scss文件，我不得不在组件的构造函数中添加这一行：

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

要应用自定义主题：

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

就是这样！

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

1 个答案: