"./src/theme.scss?ngGlobalStyle:1:0 - Error:: Module parse failed: Unexpected token (1:0) File was processed with these loaders:"

Question

After upgrading from Angular v14.3.0 to Angular v15.2.9, with : ng update @angular/core@15 @angular/cli@15, ng update @angular/material@15

i got this error when i try to compile :

./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,

My Dependencies: Most of My package.json after upgrading:

"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"
   ...
  },

My 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);

I tryed to erase node_modules and npm i after, without sucess.

Thanks a lot by advance.

Answer 1

You are likely doing

import "../mypath/theme.scss"; 

somewhere in your .ts code. This is unsupported as of Angular 14

add your theme.scss to your global files and remove every import of CSS files as ECMA modules

Other related link