构建角度库时防止 SCSS 处理

Question

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

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

Answer 1

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