Angular 16自定义主题报错：sass-loader编译失败（mat-color无效）

本地运行Angular 16应用时，所有使用mat-color调用Material自定义颜色的.scss文件均编译失败，报错来自sass-loader，提示mat-color返回的调色板映射并非有效CSS值，且mat-color被识别为未知的普通CSS函数。

报错信息 #

Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
(50: #e3f2fd, 100: #bbdefb, 200: #90caf9, 300: #64b5f6, 400: #42a5f5, 500: #2196f3, 600: 
#1e88e5, 700: #1976d2, 800: #1565c0, 900: #0d47a1, A100: #82b1ff, A200: #448aff, A400: 
#2979ff, A700: #2962ff, contrast: (50: rgba(0, 0, 0, 0.87), 100: rgba(0, 0, 0, 0.87), 200: 
rgba(0, 0, 0, 0.87), 300: rgba(0, 0, 0, 0.87), 400: rgba(0, 0, 0, 0.87), 500: white, 600: 
white, 700: white, 800: white, 900: white, A100: rgba(0, 0, 0, 0.87), A200: white, A400: 
white, A700: 
white), default: #2196f3, lighter: #bbdefb, darker: #1976d2, text: #2196f3, 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": rgba(0, 0, 0, 0.87), "400-contrast": rgba(0, 0, 0, 0.87), "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.



   color:  mat-color($docexplore-primary);
                     ^^^^^^^^^^^^^^^^^^^ value
           ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ unknown function treated as plain CSS

相关文件代码 #

md-theme.scss #

@use '@angular/material' as mat;
@import 'palettes.scss';
// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat.core();

// Create the theme object (a Sass map containing all of the palettes).
 $docexplore-theme: mat.define-light-theme((color: (primary: $docexplore-primary,
    accent: $docexplore-accent,
    warn: $docexplore-warn,
  )));


// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
// @include angular-material-theme($docexplore-theme);

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include mat.all-component-themes($docexplore-theme);

palettes.scss #

@use '@angular/material' as mat;
// Plus imports for other components in your app.

// Palette du bleu primary dans le cas d'un changement de couleur par le client
$blue-palette: (
 50: #e0f1f9,
 100: #b3dbf0,
 200: #80c4e7,
 300: #4dacdd,
 400: #269ad5,
 500: #0088ce,
 600: #0080c9,
 700: #0075c2,
 800: #006bbc,
 900: #0058b0,
 A100: #daeaff,
 A200: #a7cdff,
 A400: #74b0ff,
 A700: #5aa2ff,
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,
  )
);
 $orange-palette: (
  50: #fe4c1e,
   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,
  )
);

// Define the palettes for your theme using the Material Design palettes available in 
palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and 
darker
// hue.
$docexplore-primary: mat.define-palette(mat.$blue-palette);
$docexplore-accent: mat.define-palette(mat.$blue-palette, 500, A100, A400);

// The warn palette is optional (defaults to red).
$docexplore-warn: mat.define-palette(mat.$orange-palette);

报错的组件.scss #

@import "../../../style/palettes.scss";
@import '../../../style/color.scss';

.div-sub-container {
   margin: auto;
   width: 70%;
}

.title{
   margin: 50px;
   font-size: 1.5rem;
}

h1{
   color: mat-color($docexplore-primary);
   font-family: avenirBook;
   border-bottom: solid 2px mat-color($docexplore-primary);
}

解决方案 #

原因分析 #

Angular Material 16 采用Sass模块系统（@use）替代旧的@import，组件.scss文件仅导入了palettes.scss，但未引入Angular Material的Sass模块，导致mat-color函数未被识别，直接被当成普通CSS函数处理，输出调色板完整映射而非具体颜色值。

修复步骤 #

1. 修改组件.scss文件，添加Angular Material模块引入并替换函数：

@use '@angular/material' as mat;
@import "../../../style/palettes.scss";
@import '../../../style/color.scss';

.div-sub-container {
   margin: auto;
   width: 70%;
}

.title{
   margin: 50px;
   font-size: 1.5rem;
}

h1{
   color: mat.color($docexplore-primary);
   font-family: avenirBook;
   border-bottom: solid 2px mat.color($docexplore-primary);
}

注：Angular Material 16+ 官方推荐使用mat.color()替代旧的mat-color()，两者功能一致，更符合Sass模块规范。

2. 验证全局主题引入：确保angular.json的styles数组中正确引入全局主题文件：

"styles": [
  "src/style/md-theme.scss",
  "src/styles.scss"
]

3. 清理缓存并重建：

rm -rf node_modules/.cache
npm run build

额外优化 #

避免在每个组件重复导入模块和调色板，可在angular.json中配置全局预处理器：

"stylePreprocessorOptions": {
  "includePaths": [
    "src/style"
  ],
  "additionalData": "@use '@angular/material' as mat; @import 'palettes.scss';"
}

配置后，组件.scss无需手动导入，直接使用mat.color()和自定义变量即可。

内容的提问来源于stack exchange，提问作者Cyril