I was finally able to update all npm package dependencies for my angular project. After doing so, I am now left with this error below. When I hover over mat-core and angular-material-theme in Visual Studio, they show up as undeclared mixins. Any and all help is appreciated. Thank you!
./src/custom-theme.scss - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: no mixin named mat-core
on line 10 of src/custom-theme.scss
>> @include mat-core();
---------^
at processResult (C:\Users\ch33f\Documents\Projects\WebProjects\royalcompetition\royalcompetition\ClientApp\node_modules\webpack\lib\NormalModule.js:703:19)
at C:\Users\ch33f\Documents\Projects\WebProjects\royalcompetition\royalcompetition\ClientApp\node_modules\webpack\lib\NormalModule.js:809:5
at C:\Users\ch33f\Documents\Projects\WebProjects\royalcompetition\royalcompetition\ClientApp\node_modules\loader-runner\lib\LoaderRunner.js:399:11
at C:\Users\ch33f\Documents\Projects\WebProjects\royalcompetition\royalcompetition\ClientApp\node_modules\loader-runner\lib\LoaderRunner.js:251:18
at context.callback (C:\Users\ch33f\Documents\Projects\WebProjects\royalcompetition\royalcompetition\ClientApp\node_modules\loader-runner\lib\LoaderRunner.js:124:13)
at Object.callback (C:\Users\ch33f\Documents\Projects\WebProjects\royalcompetition\royalcompetition\ClientApp\node_modules\sass-loader\dist\index.js:54:7)
at Object.done [as callback] (C:\Users\ch33f\Documents\Projects\WebProjects\royalcompetition\royalcompetition\ClientApp\node_modules\neo-async\async.js:8069:18)
at options.error (C:\Users\ch33f\Documents\Projects\WebProjects\royalcompetition\royalcompetition\ClientApp\node_modules\node-sass\lib\index.js:294:32)
My package.json is below
{
"name": "royal_competition",
"version": "1.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"build:production": "ng build --prod",
"build:ssr": "ng run royal_competition:server:dev",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^12.0.0",
"@angular/cdk": "12.0.4",
"@angular/common": "^12.0.0",
"@angular/compiler": "12.0.3",
"@angular/compiler-cli": "12.0.3",
"@angular/core": "^12.0.3",
"@angular/flex-layout": "^11.0.0-beta.33",
"@angular/forms": "^12.0.0",
"@angular/material": "12.0.4",
"@angular/platform-browser": "12.0.3",
"@angular/platform-browser-dynamic": "12.0.3",
"@angular/platform-server": "12.0.3",
"@angular/router": "11.0.9",
"@nguniversal/module-map-ngfactory-loader": "8.2.6",
"aspnet-prerendering": "^3.0.1",
"bootstrap": "^4.3.1",
"core-js": "^3.14.0",
"hammerjs": "^2.0.8",
"jquery": "^3.5.1",
"oidc-client": "^1.9.1",
"popper.js": "^1.16.0",
"rxjs": "^6.5.3",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "^12.0.3",
"@angular/cli": "12.0.3",
"@angular/language-service": "11.0.9",
"@types/googlemaps": "^3.43.3",
"@types/jasmine": "~3.4.4",
"@types/jasminewd2": "~2.0.8",
"@types/node": "~12.11.6",
"codelyzer": "^5.2.0",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^6.3.3",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~2.1.0",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.2",
"typescript": "^4.2.4"
},
"optionalDependencies": {
"node-sass": "^4.12.0",
"protractor": "~5.4.2",
"ts-node": "~8.4.1",
"tslint": "~5.20.0"
}
}
Here is the custom-theme.scss
// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@import '~@angular/material/theming';
// Plus imports for other components in your app.
// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();
// 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/
$royal_competition-primary: mat-palette($mat-indigo);
$royal_competition-accent: mat-palette($mat-amber, A200, A100, A400);
// The warn palette is optional (defaults to red).
$royal_competition-warn: mat-palette($mat-red);
// Create the theme object (a Sass map containing all of the palettes).
$royal_competition-theme: mat-light-theme($royal_competition-primary, $royal_competition-accent, $royal_competition-warn);
// 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 angular-material-theme($royal_competition-theme);