I just upgraded from Angular v12 to v17 and I'm having some issues with styling. I'm not sure if the following warning points out the root cause or not, but I thought I would post it here to get your opinion (bear with me, I'm very new to Angular).
Error:
[webpack-dev-server] WARNING in ./src/styles.scss?ngGlobalStyle (./src/styles.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/styles.scss?ngGlobalStyle) Module Warning (from ./node_modules/sass-loader/dist/cjs.js): Angular Material themes should be created from a map containing the keys "color", "typography", and "density". The color value should be a map containing the palette values for "primary", "accent", and "warn". See https://material.angular.io/guide/theming for more information.
node_modules@angular\material\core\theming_theming.scss 183:5 define-light-theme() src\app\styles\colors\palettes.scss 9:16 @import src\app\styles\theme.scss 39:9 @import src\styles.scss 2:9
Package.json
{
"name": "WMRPD",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "echo Starting... && ng serve",
"build": "ng build",
"test": "ng test",
"test:ChromeHeadless": "ng test --watch=false --source-map=false --code-coverage --browsers=MyHeadlessChrome",
"lint": "ng lint",
"e2e": "ng e2e",
"dev:ssr": "ng run ClientApp:serve-ssr",
"serve:ssr": "node dist/ClientApp/server/main.js",
"build:ssr": "ng build --configuration production && ng run ClientApp:server:production",
"prerender": "ng run ClientApp:prerender"
},
"private": true,
"dependencies": {
"@angular/animations": "^17.3.6",
"@angular/cdk": "^17.3.6",
"@angular/common": "^17.3.6",
"@angular/compiler": "^17.3.6",
"@angular/core": "^17.3.6",
"@angular/flex-layout": "^15.0.0-beta.42",
"@angular/forms": "^17.3.6",
"@angular/material": "^17.3.6",
"@angular/platform-browser": "^17.3.6",
"@angular/platform-browser-dynamic": "^17.3.6",
"@angular/platform-server": "^17.3.6",
"@angular/router": "^17.3.6",
"@angular/ssr": "^17.3.6",
"@babel/runtime": "^7.24.5",
"@ng-idle/core": "^14.0.0",
"aspnet-prerendering": "^3.0.1",
"file-saver": "^2.0.5",
"jspdf": "^2.5.1",
"jspdf-autotable": "^3.8.2",
"ng": "^0.0.0",
"rxjs": "^7.8.1",
"rxjs-compat": "^6.6.7",
"tslib": "^2.6.2",
"update": "^0.7.4",
"zone.js": "~0.14.5"
},
"devDependencies": {
"@angular-devkit/build-angular": "^17.3.6",
"@angular/cli": "^17.3.6",
"@angular/compiler-cli": "^17.3.6",
"@types/jasmine": "^5.1.4",
"@types/node": "^20.12.7",
"eslint": "^9.1.1",
"jasmine-core": "~5.1.2",
"jasmine-spec-reporter": "~7.0.0",
"karma": "~6.4.3",
"karma-chrome-launcher": "~3.2.0",
"karma-cli": "~2.0.0",
"karma-coverage": "~2.2.1",
"karma-coverage-istanbul-reporter": "~3.0.3",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "^2.1.0",
"protractor": "^7.0.0",
"ts-node": "~10.9.2",
"tslint": "^6.1.3",
"typescript": "^5.4.5"
}
}
styles.css
/* You can add global styles to this file, and also import other style files */
@import '../src/app/styles/theme';
/* Material Icons */
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(./assets/icons/maticons.woff2) format('woff2');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
app-data-grid.custom-column-width{
th{
width: 200px!important;
}
}
theme.scss
@use "sass:map";
@use '@angular/material' as mat;
/*@import '@angular/material/theming';*/
/*@import 'typography';*/
@import 'layout';
@import 'colors/palettes';
@import 'colors/palette-brand';
@import 'controls/controls';
// Include non-theme styles for core.
@include mat.core();
@include mat.all-component-themes($wf-app-theme);
You need to create a theme https://material.angular.io/guide/theming#defining-a-theme Example from documentation
@use '@angular/material' as mat;
$my-primary: mat.define-palette(mat.$indigo-palette, 500);
$my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
// The "warn" palette is optional and defaults to red if not specified.
$my-warn: mat.define-palette(mat.$red-palette);
$my-theme: mat.define-light-theme((
color: (
primary: $my-primary,
accent: $my-accent,
warn: $my-warn,
),
typography: mat.define-typography-config(),
density: 0,
));
@include mat.core-theme($my-theme); //<- or maybe only this is missing $wf-app-theme
@include mat.all-component-themes($my-theme);