时间戳

首页 > 解决方案 > 无法从 Angular 7 中的材质主题中获取变量

angular - 无法从 Angular 7 中的材质主题中获取变量

问题描述

我有 Angular 7.0.3，我正在尝试使用我的材质主题的原色创建 scss 变量

// src/styles/_variables.scss
@import "~@angular/material/theming";
@include mat-core();
$app-primary: mat-palette($mat-indigo);

但收到此错误

ERROR in ./src/app/app.component.scss
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

undefined
            ^
      (50: #e8eaf6, 100: #c5cae9, 200: #9fa8da, 300: #7986cb, 400: #5c6bc0, 500: #3f51b5, 600: #3949ab, 700: #303f9f, 800: #283593, 900: #1a237e, A100: #8c9eff, A200: #536dfe, A400: #3d5afe, A700: #304ffe, contrast: (50: rgba(0, 0, 0, 0.87), 100: rgba(0, 0, 0, 0.87), 200: rgba(0, 0, 0, 0.87), 300: white, 400: white, 500: white, 600: white, 700: white, 800: white, 900: white, A100: rgba(0, 0, 0, 0.87), A200: white, A400: white, A700: white), default: #3f51b5, lighter: #c5cae9, darker: #303f9f, default-contrast: white, lighter-contrast: rgba(0, 0, 0, 0.87), darker-contrast: white, "50-contrast": rgba(0, 0, 0, 0.87), "100-contrast": rgba(0, 0, 0, 0.87), "200-contrast": rgba(0, 0, 0, 0.87), "300-contrast": white, "400-contrast": white, "500-contrast": white, "600-contrast": white, "700-contrast": white, "800-contrast": white, "900-contrast": white, "A100-contrast": rgba(0, 0, 0, 0.87), "A200-contrast": white, "A400-contrast": white, "A700-contrast": white, "contrast-contrast": null)
 isn't a valid CSS value.
      in C:\code\front\angular\speakup\node_modules\@angular\material\_theming.scss (line 1268, column 14)

我该如何解决这个问题，或者我需要向您提供哪些关于我的设置的额外信息？

标签： angularsassangular-materialangular7

解决方案

您是否在某处使用变量 $app-primary 作为 CSS 颜色值（例如color: $app-primary）？

在这种情况下，您需要使用 map_get() 来提取实际的颜色值：

例如color: map_get($app-primary, 900) <-第二个值是色调，在@angular/material/_theming.scss 中检查$mat-indigo 之类的调色板以获取可能的值

另外：您在 _variable.scss 中调用 mat-core()。这让我认为您可能不止一次调用 mat-core() 。不要那样做！结帐https://material.angular.io/guide/theming

推荐阅读