SassError: $map: null不是一个映射 - Angular自定义主题的问题解决
P粉006540600
P粉006540600 2023-08-25 11:50:05
[CSS3讨论组]

我为我的Angular项目创建了以下自定义主题:

@use '@angular/material' as mat;
/* 您可以在此文件中添加全局样式,也可以导入其他样式文件 */


@include mat.core();

$f-brand: (
  50 : #e0f2f1,
  100 : #b3e0db,
  200 : #80cbc4,
  300 : #4db6ac,
  400 : #26a69a,
  500 : #009688,
  600 : #008e80,
  700 : #008375,
  800 : #00796b,
  900 : #006858,
  A100 : #97ffec,
  A200 : #64ffe3,
  A400 : #31ffda,
  A700 : #18ffd5,
  contrast: (
    50 : #000000,
    100 : #000000,
    200 : #000000,
    300 : #000000,
    400 : #ffffff,
    500 : #ffffff,
    600 : #ffffff,
    700 : #ffffff,
    800 : #ffffff,
    900 : #ffffff,
    A100 : #000000,
    A200 : #000000,
    A400 : #000000,
    A700 : #000000,
  )
);

$primary: mat.define-palette($f-brand);

$theme: mat.define-light-theme($primary);

@include mat.all-component-themes($theme);

我还将自定义主题添加到了我的general styles.css文件中,但是当我运行“ng serve”时,出现了以下错误:

SassError: $map: null is not a map.
  ╷
9 │   $foreground-base: map.get($foreground, base);
  │                     ^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  node_modules\@angular\material\core\ripple\_ripple-theme.scss 9:21  color()
  node_modules\@angular\material\core\ripple\_ripple-theme.scss 30:7  @content
  node_modules\@angular\material\core\theming\_theming.scss 376:3     private-check-duplicate-theme-styles()
  node_modules\@angular\material\core\ripple\_ripple-theme.scss 27:3  theme()
  node_modules\@angular\material\core\_core-theme.scss 48:5           @content
  node_modules\@angular\material\core\theming\_theming.scss 376:3     private-check-duplicate-theme-styles()
  node_modules\@angular\material\core\_core-theme.scss 47:3           theme()
  node_modules\@angular\material\core\theming\_all-theme.scss 43:5    @content
  node_modules\@angular\material\core\theming\_theming.scss 376:3     private-check-duplicate-theme-styles()
  node_modules\@angular\material\core\theming\_all-theme.scss 42:3    all-component-themes()
  src\styles-f-theme.scss 44:1                                        root stylesheet

通过在网上搜索,我发现“map.get”现在似乎是“map-get”。不幸的是,我不知道如何修复这个问题。

我项目中使用的Angular版本是“14.0.5”,Angular Material版本是“14.0.4”。

P粉006540600
P粉006540600

全部回复(1)
P粉741678385

您之所以出现这个错误,是因为构建主题需要两个调色板:主色和强调色。

添加新的调色板或将您的主色设为强调色:

$theme: mat.define-light-theme($primary, $primary);
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号