How to I make themes work with Angular 18 and Materials 3

i am having some issues understanding why I am getting these issues I have tried to follow numerous sessions, watched videos, but everything I found so-far depends on app.module.ts, which is not a default of angular 18 or downgrading to materials 2.

I am new to this and have already tried re-creating the app about 10 times

Here is the issue I am getting

src/styles.scss 5:11 root stylesheet [plugin angular-sass]

angular:styles/global:styles:1:8:
1 │ @import 'src/styles.scss';


This is my styles.scss

@use '@angular/material' as mat;
@include mat.core();

$primary: mat.define-palette(mat.$indigo-palette);
$accent: mat.define-palette(mat.$pink-palette);

$my-app-theme: mat.define-light-theme((
color: (
primary: $primary,
accent: $accent,
)
));

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

body {
font-family: Roboto, "Helvetica Neue", sans-serif;
}


here is package.json

@angular/compiler": "^18.2.0",
"@angular/core": "^18.2.0",
"@angular/forms": "^18.2.0",
"@angular/material": "^18.2.11",
"@angular/platform-browser": "^18.2.0",
"@angular/platform-browser-dynamic": "^18.2.0",
"@angular/router": "^18.2.0",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.14.10"
},
"devDependencies": {
"@angular-devkit/build-angular": "^18.2.10",
"@angular/cli": "^18.2.10",
"@angular/compiler-cli": "^18.2.0",
"@types/jasmine": "~5.1.0",
"jasmine-core": "~5.2.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",

Continue reading...