today i've updated my project from angular 16.2.14 to 17.3.1, but when i try to compile the following errors occur, what can i do to resolve this?
./src/assets/styles/customMaterialTheme.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
"headline1-font-family already has a link"
╷
48 │ $unused: keys.add-link(keys.combine($style, $base-key), $base-key);
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
@material\typography\_typography.scss 48:16 set-styles-()
@material\typography\_typography.scss 128:10 @use
node_modules\@material\floating-label\_floating-label-theme.scss 32:1 @forward
@material\floating-label\_variables.scss 23:1 @use
node_modules\@material\textfield\_variables.scss 26:1 @forward
@material\_index.scss 1:1 @use
node_modules\@angular\material\core\tokens\m2\mat\_form-field.scss 3:1 @use
node_modules\@angular\material\core\tokens\m2\_index.scss 20:1 @forward
@angular\_index.scss 17:1 @use
src\assets\styles\customMaterialTheme.scss 1:1 root stylesheet
./src/assets/styles/customMaterialTheme.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):
"headline1-font-family already has a link"
╷
48 │ $unused: keys.add-link(keys.combine($style, $base-key), $base-key);
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
@material\typography\_typography.scss 48:16 set-styles-()
@material\typography\_typography.scss 128:10 @use
node_modules\@material\floating-label\_floating-label-theme.scss 32:1 @forward
@material\floating-label\_variables.scss 23:1 @use
node_modules\@material\textfield\_variables.scss 26:1 @forward
@material\_index.scss 1:1 @use
node_modules\@angular\material\core\tokens\m2\mat\_form-field.scss 3:1 @use
node_modules\@angular\material\core\tokens\m2\_index.scss 20:1 @forward
@angular\_index.scss 17:1 @use
src\assets\styles\customMaterialTheme.scss 1:1 root stylesheet
this is the code of customMaterialTheme.scss:
@use '@angular/material' as mat;
@include mat.core();
$my-primary: mat.define-palette(mat.$deep-purple-palette);
$my-accent: mat.define-palette(mat.$blue-grey-palette, A200, A100, A400);
//$my-warn: mat.define-palette(mat.$amber-palette, 900);
$typography: mat.define-typography-config($font-family: 'Roboto');
/*
https://muhimasri.com/blogs/how-to-customize-theme-and-colors-in-material-ui/
*/
$my-theme: mat.define-light-theme((
color: (
primary: $my-primary,
accent: $my-accent,
//warn: $my-warn,
),
typography: $typography,
density: 0,
));
// Emit theme-dependent styles for common features used across multiple components.
@include mat.core-theme($my-theme);
// Emit styles for MatButton based on $my-theme
@include mat.button-theme($my-theme);
// Theme for all material components
@include mat.all-component-themes($my-theme);
@include mat.all-component-typographies($typography);
:root {
--primary-color: #{mat.get-color-from-palette($my-primary, default)};
--primary-color-light: #{mat.get-color-from-palette($my-primary, 100)};
--primary-color-text: #{mat.get-color-from-palette($my-primary, default-contrast)};
--accent-color: #{mat.get-color-from-palette($my-accent, default)};
--accent-color-light: #{mat.get-color-from-palette($my-accent, A100)};
--accent-color-text: #{mat.get-color-from-palette($my-accent, default-contrast)};
}
thanks to everyone!
Resolved. I've had to delete node_modules folder and package-lock.json then i've recompiled and everything works.