Angular Material 3 Custom Theme Not Working (Nx monorepo)

I've got this Angular app within an Nx repo. After npx nx run testapp:serve I'm getting the following error:

./src/app/shared/design/testapp.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Undefined function.
╷
38 │ $testapp-primary: mat.define-palette($palette-testapp-blue);
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
src\app\shared\design\testapp.scss 38:16 root stylesheet

./src/app/shared/design/testapp.scss?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Undefined function.
╷
38 │ $testapp-primary: mat.define-palette($palette-testapp-blue);
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
src\app\shared\design\testapp.scss 38:16 root stylesheet



testapp.scss:

@use "@angular/material" as mat;

@include mat.core();

$palette-testapp-blue: (
A100: #8897ba,
A200: #5a698a,
A400: #2e3f5d,
contrast: (
A100: rgb(96, 96, 96),
A200: rgb(96, 96, 96),
A400: rgb(96, 96, 96),
),
);

$palette-testapp-gold: (
A100: #ffe5af,
A200: #cfb37f,
A400: #9d8452,
contrast: (
A100: rgb(96, 96, 96),
A200: rgb(96, 96, 96),
A400: rgb(96, 96, 96),
),
);

$palette-testapp-red: (
A100: #ffafae,
A200: #cf7f7f,
A400: #9c5153,
contrast: (
A100: rgb(96, 96, 96),
A200: rgb(96, 96, 96),
A400: rgb(96, 96, 96),
),
);

$testapp-primary: mat.define-palette($palette-testapp-blue);
$testapp-accent: mat.define-palette($palette-testapp-gold);
$testapp-warn: mat.define-palette($palette-testapp-red);

$testapp-theme: mat.define-light-theme($testapp-primary, $testapp-accent, $testapp-warn);

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


project.json:
...
"styles": [
"src/styles.scss",
"src/app/shared/design/testapp.scss"
],
...


package.json:
"dependencies": {
"@angular/animations": "~18.1.2",
"@angular/cdk": "^18.1.2",
"@angular/common": "~18.1.2",
"@angular/compiler": "~18.1.2",
"@angular/core": "~18.1.2",
"@angular/fire": "^18.0.1",
"@angular/forms": "~18.1.2",
"@angular/material": "^18.1.2",
"@angular/platform-browser": "~18.1.2",
"@angular/platform-browser-dynamic": "~18.1.2",
"@angular/router": "~18.1.2",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.14.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "~18.1.2",
"@angular-devkit/core": "~18.1.2",
"@angular-devkit/schematics": "~18.1.2",
"@angular-eslint/eslint-plugin": "~18.1.0",
"@angular-eslint/eslint-plugin-template": "~18.1.0",
"@angular-eslint/template-parser": "~18.1.0",
"@angular/cli": "~18.1.2",
"@angular/compiler-cli": "~18.1.2",
"@angular/language-service": "~18.1.2",
"@nx/angular": "19.5.3",
"@nx/workspace": "19.5.3",
"@schematics/angular": "~18.1.2",
"@types/jasmine": "~5.1.4",
"@types/jasminewd2": "~2.0.3",
"@types/node": "20.10.3",
"codelyzer": "^6.0.2",
"jasmine-core": "~5.1.1",
"jasmine-spec-reporter": "~7.0.0",
"karma": "~6.4.2",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.3",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "^2.1.0",
"nx": "19.5.3",
"protractor": "~7.0.0",
"ts-node": "~10.9.2",
"tslint": "~6.1.3",
"typescript": "5.5.4"
}

Continue reading...