文章/答案/技术大牛

发布

社区首页 >问答首页 >从组件构造器(不是装饰器)动态包含.scss - Angular 4

问从组件构造器(不是装饰器)动态包含.scss - Angular 4
EN

Stack Overflow用户

提问于 2018-04-18 22:46:22

回答 1查看 98关注 0票数 0

我需要应用一个自定义主题在角度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文件包含到组件中吗？

或者，我如何避免加载如此多的样式？

angular

typescript

sass

angular-material2

回答 1

Stack Overflow用户

发布于 2018-04-18 23:18:33

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

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

对于应用自定义主题：

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

仅此而已！

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/49902740

复制

相似问题

问从组件构造器(不是装饰器)动态包含.scss - Angular 4
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从组件构造器(不是装饰器)动态包含.scss - Angular 4EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从组件构造器(不是装饰器)动态包含.scss - Angular 4
EN