angular - 构建 Angular 库时防止 SCSS 处理

Question

出于主题性目的，我们希望能够在消费应用程序的 Angular 组件库中更改 SCSS 变量。

是否可以阻止我们的组件库将 SCSS 处理为 CSS？或者有没有更好的方法来实现我们想要的？

Answer 1

SCSS 不是浏览器理解的语言。所以在一天结束时，sccs 将被转换为 CSS。

即使可以，从库中导出 scss 并构建它也是一种非常糟糕的做法。它违反了很多做法。

问题是，无论如何，scss 正在与您的应用程序一起构建。

你可以通过很多方式。您可以按照网络上的众多指南之一在您的应用程序中创建一组主题。 ( check one example here )

或者你可以采用有 Angular Material 的方式。在此处查看他们如何处理主题:angular material themeing

第一个比第二个容易。第二个，假设您在 mixin 中拥有所有样式，并且当您构建它们时，主题相关变量将应用。

// 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);