多个 Angular Material 主题：获取 sass 地图属性始终返回旧的、缓存的值

Question

对于多个 Angular Material 主题，其想法是拥有一个 scss 属性，每个主题具有不同的值。我想从 mixin 中访问此 sass 映射属性，正如本文中所做的那样：https://sevriukovmk.medium.com/custom-angular-material-multiple-themes-dd7cb31f835

我正在像这样访问这个 sass 地图（并分配给

background-color

只是为了测试：

@use 'sass:map';

@mixin theme($theme) {
  $foreground: map.get($theme, foreground);
  $secondary-text: map.get($foreground, secondary-text);
  body {
    @debug $secondary-text;
    background-color: $secondary-text !important;
  }
}

这是有效的，只是它不断返回旧的缓存值（

rgba(0, 0, 0, 0.54)

）。有趣的是

0.54

的值在整个代码库中甚至不再存在，因此这似乎是一个缓存值。

我运行了

ng cache clean

，还使用

ng cache disable

和

ng cache off

完全禁用了角度缓存，但旧值不断返回。

这可能是什么原因造成的？ 我可以删除哪些其他（sass）缓存？

Answer 1

需要为每个主题调用依赖于组件的主题 mixins。

所以如果这是一个主题文件：

@use 'sass:map';
@use '@angular/material' as mat;
@use 'src/app/styles/abstracts/theme.functions' as functions;
@use "src/app/styles/theme-dependant.styles" as components;
@import 'src/app/styles/abstracts/theme-variables';

@include mat.core();

$grey-palette: mat.define-palette(mat.$grey-palette);
$grey-theme: functions.mat-create-theme(
  $grey-palette,
  $grey-palette,
  $warn-palette,
  $light-theme-background-palette,
  $light-theme-foreground-palette
);

@include mat.all-component-themes($grey-theme);
@include components.theme($grey-theme); // this was the important part, needs to happen per theme

看起来像这样：

@use "../app.style" as app;
@use "./base/typography" as typography;

@mixin theme($theme) {
  @include app.theme($theme);
  @include typography.theme($theme);
}

其中的排版可以是这样的：

@use 'sass:map';
@use '@angular/material' as mat;
@import 'src/app/styles/abstracts/variables';
@import 'src/app/styles/layout/responsiveness';

@mixin theme($theme) {
  $foreground: map.get($theme, foreground);
  $secondary-text: map.get($foreground, secondary-text);

  $colors: map.get($theme, color);
  $primary: map.get($colors, primary);
  $accent: map.get($colors, accent);
  $primary50: mat.get-color-from-palette($primary, 50);
  $accent50: mat.get-color-from-palette($accent, 50);

  button.mat-mdc-raised-button.mat-primary {
    color: $primary50 !important;
  }
  button.mat-mdc-raised-button.mat-accent {
    color: $accent50 !important;
  }
}

每个主题的自定义主题相关样式的完整工作设置。 希望它对某人有帮助。