Error: Module parse failed: Unexpected Token (3:0) after upgrading from Angular 14 to 15

I upgraded the Angular version from my Program to Angular Version 15. Since then the website refuses to compile outputting the error:

./src/styles.scss?ngGlobalStyle:3:0 - Error: Module parse failed: Unexpected token (3: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.
| /* based on angular-toastr css https://github.com/Foxandxss/angular-toastr/blob/cb508fe6801d6b288d3afc525bb40fee1b101650/dist/angular-toastr.css */
| /* position */
> .toast-center-center {
| top: 50%;
| left: 50%;


heres my angular.json file.

{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"cli": {
"analytics": false
},
"version": 1,
"newProjectRoot": "projects",
"projects": {
"redact": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"prefix": "app",
"style": "scss"
},
"@schematics/angular:application": {
"strict": true
},
"@schematics/angular:directive": {
"prefix": "app"
}
},
"root": "",
"sourceRoot": "src",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
"tsConfig": "tsconfig.app.json",
"polyfills": "src/polyfills.ts",
"inlineStyleLanguage": "scss",
"assets": [
"src/assets",
"src/icon.ico",
"src/icon.png",
"src/favicon.ico",
"src/assets/config.json",
"src/web.config",
"src/assets/snippets/redact.js",
"src/assets/snippets/text.js",
"src/assets/snippets/sql.js",
{ "glob": "**/*", "input": "node_modules/tinymce", "output": "/tinymce/" },
{ "glob": "**/*", "input": "node_modules/monaco-editor", "output": "assets/monaco-editor" },
"src/assets/tinyMceLanguages/de.js"
],
"styles": [
"node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.scss",
"src/styles-app-loading.scss"
],
"stylePreprocessorOptions": {
"includePaths": [
"src/scss"
]
},
"scripts": [
"./node_modules/svg-pan-zoom/dist/svg-pan-zoom.min.js",
"./node_modules/js-interpreter-npm/js-interpreter/acorn_interpreter.js",
"./node_modules/tinymce/tinymce.min.js"
],
"allowedCommonJsDependencies": [
"svg-pan-zoom",
"codemirror/mode/javascript/javascript",
"codemirror/mode/markdown/markdown",
"codemirror/mode/htmlmixed/htmlmixed",
"brace/mode/html",
"js-beautify",
"jsbarcode",
"rxjs",
"moment",
"brace",
"guid-typescript"
]
},
"configurations": {
"web": {
"budgets": [
{
"type": "anyComponentStyle",
"maximumWarning": "2mb",
"maximumError": "4mb"
}
],
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.web.ts"
}
]
},
"dev": {
"budgets": [
{
"type": "anyComponentStyle",
"maximumWarning": "2mb",
"maximumError": "4mb"
}
],
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.dev.ts"
}
]
},
"production": {
"budgets": [
{
"type": "anyComponentStyle",
"maximumWarning": "2mb",
"maximumError": "4mb"
}
],
"outputHashing": "all",
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
]
},
"beta": {
"budgets": [
{
"type": "anyComponentStyle",
"maximumWarning": "6kb"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.beta.ts"
}
]
},
"azure": {
"budgets": [
{
"type": "anyComponentStyle",
"maximumWarning": "6kb"
}
],
"outputHashing": "all",
"namedChunks": false,
"aot": false,
"extractLicenses": true,
"vendorChunk": false,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.azure.ts"
}
]
}
},
"defaultConfiguration": "web"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"dev": {
"buildTarget": "redact:build:dev"
},
"web": {
"buildTarget": "redact:build:web"
},
"production": {
"buildTarget": "redact:buildroduction"
}
},
"defaultConfiguration": "dev"
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"buildTarget": "redact:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
}
},
"cypress-run": {
"builder": "@cypress/schematic:cypress",
"options": {
"devServerTarget": "redact:serve"
},
"configurations": {
"production": {
"devServerTarget": "redact:serveroduction"
}
}
},
"cypress-open": {
"builder": "@cypress/schematic:cypress",
"options": {
"watch": true,
"headless": false
}
},
"e2e": {
"builder": "@cypress/schematic:cypress",
"options": {
"devServerTarget": "redact-e2e:serve",
"watch": true,
"headless": false
},
"configurations": {
"production": {
"devServerTarget": "redact-e2e:serveroduction"
}
}
}
}
}
}
}



styles.css

@use '@angular/material' as mat;
@use 'ngx-toastr/toastr';
@use "codemirror/lib/codemirror";

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


@include mat.legacy-typography-hierarchy(mat.define-legacy-typography-config());


// Paletten können unter http://mcg.mbitson.com generiert werden. (bitte Material2 exportieren)
// redact-Primary Palette
$redact-primary-palette: (
50 : #e3e6ee,
100 : #b9c1d5,
200 : #8a97b9,
300 : #5b6d9d,
400 : #384e88,
500 : #152f73,
600 : #122a6b,
700 : #0f2360,
800 : #0c1d56,
900 : #061243,
A100 : #798bff,
A200 : #465fff,
A400 : #1333ff,
A700 : #0022f8,
contrast: (
50 : #000000,
100 : #000000,
200 : #000000,
300 : #ffffff,
400 : #ffffff,
500 : #ffffff,
600 : #ffffff,
700 : #ffffff,
800 : #ffffff,
900 : #ffffff,
A100 : #000000,
A200 : #ffffff,
A400 : #ffffff,
A700 : #ffffff,
)
);

$redact-accent-palette: (
50 : #eaebf4,
100 : #c9cde3,
200 : #a6acd1,
300 : #828abe,
400 : #6771b0,
500 : #4c58a2,
600 : #45509a,
700 : #3c4790,
800 : #333d86,
900 : #242d75,
A100 : #b6bdff,
A200 : #838fff,
A400 : #5061ff,
A700 : #364aff,
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 : #ffffff,
A700 : #ffffff,
)
);

$redact-warn-palette: (
50 : #f7e6ea,
100 : #eac2ca,
200 : #dd99a7,
300 : #cf7084,
400 : #c45169,
500 : #ba324f,
600 : #b32d48,
700 : #ab263f,
800 : #a31f36,
900 : #941326,
A100 : #ffc7ce,
A200 : #ff94a1,
A400 : #ff6174,
A700 : #ff475d,
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. Available color palettes: https://material.io/design/color/
$candy-app-primary: mat.define-palette($redact-primary-palette);
$candy-app-accent: mat.define-palette($redact-accent-palette, 500, 400, 600);

// The warn palette is optional (defaults to red).
$candy-app-warn: mat.define-palette($redact-warn-palette);

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

$accent: mat.get-color-from-palette($candy-app-accent);

// 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-legacy-component-themes($candy-app-theme);

html, body {
margin: 0;
padding: 0;

height: 100%;
}

// "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",

html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

// Primary soll #152f73 werden und Secondary #a0a2a7.
// Fehler: #ba324f
// Akzent blau #4c58a2
// Akzent Grau #727378

.active {
// font-weight: bold;
color: $accent !important;
background-color: rgba($accent, .12) !important;
}

// .mat-form-field-empty.mat-form-field-label {
// color: green;
// }

.ngx-codemirror {
border: 1px solid #ccc;
}

.CodeMirror {
// height: fit-content!important;
height: 600px;
min-height: 100px;
}

.angular-editor-textarea {
overflow-x: auto !important;
}

// Alle Dialoge in der Göße veränderbar machen
.cdk-overlay-pane{
width: unset !important;
height: unset !important;
max-width: 100% !important;
}
.mat-dialog-container{
max-width: 100%;
max-height: 100% !important;
resize: both;
}

#customDialogCancel {
font-family: Roboto, "Helvetica Neue", sans-serif;
font-size: 14px;
font-weight: 500;
background: transparent;
box-sizing: border-box;
position: relative;
user-select: none;
cursor: pointer;
outline: none;
-webkit-tap-highlight-color: transparent;
display: inline-block;
white-space: nowrap;
text-decoration: none;
vertical-align: baseline;
text-align: center;
margin: 0;
min-width: 64px;
border-radius: 4px;
overflow: visible;
border: 1px solid currentColor;
padding: 0 15px;
line-height: 34px;
color: #ba324f;
border-color: rgba(0, 0, 0, 0.12);
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
margin-right: 5px;
margin-top: 10px;
}

#customDialogOkay {
font-family: Roboto, "Helvetica Neue", sans-serif;
font-size: 14px;
font-weight: 500;
background: transparent;
box-sizing: border-box;
position: relative;
user-select: none;
cursor: pointer;
outline: none;
-webkit-tap-highlight-color: transparent;
display: inline-block;
white-space: nowrap;
text-decoration: none;
vertical-align: baseline;
text-align: center;
margin: 0;
min-width: 64px;
border-radius: 4px;
overflow: visible;
border: 1px solid currentColor;
padding: 0 15px;
line-height: 34px;
color: #152f73;
border-color: rgba(0, 0, 0, 0.12);
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
margin-top: 10px;
}

#customDialogInput {
color: rgba(0, 0, 0, 0.87);
font-size: inherit;
font-weight: 400;
line-height: 1.125;
font-family: Roboto, "Helvetica Neue", sans-serif;
letter-spacing: normal;
display: inline-block;
position: relative;
text-align: left;
width: 98%;
}

// Für das Styling von Filterspalten bei Filter On/Off Toggle
.sorting-width-on {
.mat-sort-header-content {
min-width: 100% !important;
}
}

.sorting-width-off {
.mat-sort-header-content {
min-width: auto !important;
}
}



if more info is need, will provide.

I tried some things to fix it.

• Tried updating the version of the Toastr package to the newest. Nothing.
• Skipped past Angular version 15 and installed 16 & 17 which lead to the same error
• did countless adjustments to the angular.json file to no avail.
• installing different alternative loaders which all didnt do anything.

Continue reading...