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

score 0 · Answer 1 · answered Jul 20 '23 at 15:59

0

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

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

1 Answers1