出于主题化的目的,我们希望能够在使用应用程序的Angular组件库中更改SCSS变量。
是否可以防止我们的组件库将SCSS处理为CSS?还是有更好的方法来实现我们想要的?
出于主题化的目的,我们希望能够在使用应用程序的Angular组件库中更改SCSS变量。
是否可以防止我们的组件库将SCSS处理为CSS?还是有更好的方法来实现我们想要的?
SCSS不是浏览器可以理解的语言。因此,最终,sccs将转换为CSS。
即使可以的话,从库中导出scss并进行构建也是一个非常糟糕的做法。它违反了许多惯例。
事实是,无论如何,正在与您的应用程序一起构建scss。
您可以通过多种方式进行操作。您可以按照网络上的众多指南之一在自己的应用中创建一组主题。 (check one example here)
或者您也可以选择棱角分明的方式。在此处检查他们如何处理主题:angular material themeing
第一个比第二个容易。第二个,假设您在mixins中拥有所有样式,并且在构建它们时将应用与主题相关的变量。
// Import library functions for theme creation.
@import '~@angular/material/theming';
// Include non-theme styles for core.
@include mat-core();
// Define your application's custom theme.
$primary: mat-palette($mat-indigo);
$accent: mat-palette($mat-pink,A200,A100,A400);
$theme: mat-light-theme($primary,$accent);
// Include theme styles for Angular Material components.
@include angular-material-theme($theme);
// Include theme styles for your custom components.
@include candy-carousel-theme($theme);