Angular从14.3.0升级到15.2.9后编译theme.scss报错求助

将Angular从v14.3.0升级到v15.2.9，执行了以下命令：

ng update @angular/core@15 @angular/cli@15
ng update @angular/material@15

编译项目时出现以下错误：

./src/theme.scss?ngGlobalStyle:1:0 - Error: Module parse failed: Unexpected token (1:0)
File was processed with these loaders:
 * ./node_modules/resolve-url-loader/index.js
 * ./node_modules/sass-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
> .mat-h1,
| .mat-headline,
| .mat-typography .mat-h1,

升级后的package.json主要依赖项：

"dependencies": {
    "@angular-material-components/moment-adapter": "^9.0.0",
    "@angular/animations": "^15.2.9",
    "@angular/cdk": "^15.2.9",
    "@angular/compiler": "^15.2.9",
    "@angular/core": "^15.2.9",
    "@angular/forms": "^15.2.9",
    "@angular/localize": "^15.2.9",
    "@angular/material": "^15.2.9",
    "@angular/material-moment-adapter": "^15.2.9",
    "@angular/platform-browser": "^15.2.9",
    "@angular/platform-browser-dynamic": "^15.2.9",
    "@angular/router": "^15.2.9",
    "bootstrap": "^4.6.1",
    "@angular-devkit/build-angular": "^15.2.8",
    "@angular-material-components/datetime-picker": "^9.0.0",
    "@angular/cli": "^15.2.8",
    "@angular/common": "^15.2.9",
    "@angular/compiler-cli": "^15.2.9",
    "@angular/language-service": "^15.2.9",
    "@types/jasmine": "^2.8.19",
    "@types/jasminewd2": "^2.0.10",
    "@types/node": "^12.20.46",
    "ts-node": "~7.0.0",
    "tslint": "~6.1.0",
    "typescript": "^4.8.4"
   ...
  },

theme.scss内容：

// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@use '@angular/material' as mat;

@include mat.all-legacy-component-typographies();
@include mat.legacy-core();


$primary-palette: (
    50 : #0C7B93,
    100 : #27496D,
    500 : #142850,
    700 : #8BBCCC,
    contrast: (
      50 : #fcfcfc,
    )
);

$accent-palette: (
    50 : #00A8CC,
    100 : #5534A5,
    500 : #A85CF9,
    700 : #A85CF9,
    contrast: (
      50 : #fcfcfc,
    )
);

$warn-palette: (
    50 : #ff0000,
    100 : #69DADB,
    500 : #A85CF9,
    700 : #A85CF9,
    contrast: (
      50 : #000000,
    )
);
      
$theme-foreground: (
  50 : #fcfcfc,
  100 : #000000,
  500 : #142850,
  700 : #8BBCCC,
  contrast: (
      50 : #fcfcfc,
    )
);


$primary: mat.define-palette($primary-palette,50 );
$accent: mat.define-palette($accent-palette,50);
$warn: mat.define-palette($warn-palette,50);
$foreground : mat.define-palette($theme-foreground,50);


$theme: mat.define-light-theme((
  color: (
    primary: $primary,
    accent: $accent,
    warn: $warn,
  //  foreground: $foreground,
  ),
));


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

已尝试删除node_modules并重新npm install，问题未解决。

解决方案 #

1. 升级第三方Angular Material组件库

@angular-material-components/datetime-picker和@angular-material-components/moment-adapter版本为9.0.0，与Angular 15完全不兼容，会引发依赖冲突和编译异常。需升级到适配Angular 15的版本：

npm install @angular-material-components/datetime-picker@15 @angular-material-components/moment-adapter@15 --save

2. 替换node-sass为sass

Angular 15及后续版本不再支持node-sass，改用官方推荐的sass。若项目安装了node-sass，先卸载再安装sass：

npm uninstall node-sass
npm install sass --save-dev

3. 补全自定义调色板的完整色调

自定义调色板缺少200、300、400等必要色调，虽Angular Material会自动补全，但可能导致样式生成异常。建议补充完整调色板定义，例如：

$primary-palette: (
    50: #0C7B93,
    100: #27496D,
    200: #1a3a5a,
    300: #16324c,
    400: #122a3e,
    500: #142850,
    600: #102246,
    700: #8BBCCC,
    800: #7bb0c0,
    900: #6ba4b4,
    contrast: (
      50: #fcfcfc,
      100: #fcfcfc,
      500: #fcfcfc,
      700: #000000
    )
);

4. 清理缓存并重新构建

执行以下命令清理Angular和npm缓存，再重新安装依赖并构建：

ng cache clean --all
npm cache clean --force
rm -rf node_modules package-lock.json
npm install
ng build

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