components Sass Error Can't find stylesheet to import - No duplication

Is this a regression?

[ ] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

./src/app/theme.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js): Can't find stylesheet to import. ╷ 3 │ @use '@angular/material/theming'; src\app\theme.scss 3:1 root stylesheet

./src/app/theme.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): Can't find stylesheet to import. ╷ 38 │ @import '@angular/material/theming';

src\app\theme.scss 38:9 root stylesheet

Reproduction

StackBlitz link: Steps to reproduce: 1. 2.

Expected Behavior

@use '@angular/material' as mat; @use '@angular/material/theming';

@include mat.core();

$Login-primary: mat.define-palette(mat.$indigo-palette); $Login-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);

// The warn palette is optional (defaults to red). $Login-warn: mat.define-palette(mat.$red-palette);

// Create the theme object. A theme consists of configurations for individual // theming systems such as "color" or "typography". $Login-theme: mat.define-light-theme(( color: ( primary: $Login-primary, accent: $Login-accent, warn: $Login-warn, ) ));

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

@include mat-core();

@import 'https://fonts.googleapis.com/css?family=Material+Icons'; @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500');

$fontConfig: ( display-4: mat.define-typography-level(112px, 112px, 300, 'Roboto', -0.0134em), display-3: mat.define-typography-level(56px, 56px, 400, 'Roboto', -0.0089em), display-2: mat.define-typography-level(45px, 48px, 400, 'Roboto', 0.0000em), display-1: mat.define-typography-level(34px, 40px, 400, 'Roboto', 0.0074em), headline: mat.define-typography-level(24px, 32px, 400, 'Roboto', 0.0000em), title: mat.define-typography-level(20px, 32px, 500, 'Roboto', 0.0075em), subheading-2: mat.define-typography-level(16px, 28px, 400, 'Roboto', 0.0094em), subheading-1: mat.define-typography-level(15px, 24px, 500, 'Roboto', 0.0067em), body-2: mat.define-typography-level(14px, 24px, 500, 'Roboto', 0.0179em), body-1: mat.define-typography-level(14px, 20px, 400, 'Roboto', 0.0179em), button: mat.define-typography-level(14px, 14px, 500, 'Roboto', 0.0893em), caption: mat.define-typography-level(12px, 20px, 400, 'Roboto', 0.0333em), input: mat.define-typography-level(inherit, 1.125, 400, 'Roboto', 1.5px) );

// Foreground Elements

// Light Theme Text $dark-text: #333333; $dark-primary-text: rgba($dark-text, 0.87); $dark-accent-text: rgba($dark-primary-text, 0.54); $dark-disabled-text: rgba($dark-primary-text, 0.38); $dark-dividers: rgba($dark-primary-text, 0.12); $dark-focused: rgba($dark-primary-text, 0.12);

$mat-light-theme-foreground: ( base: black, divider: $dark-dividers, dividers: $dark-dividers, disabled: $dark-disabled-text, disabled-button: rgba($dark-text, 0.26), disabled-text: $dark-disabled-text, elevation: black, secondary-text: $dark-accent-text, hint-text: $dark-disabled-text, accent-text: $dark-accent-text, icon: $dark-accent-text, icons: $dark-accent-text, text: $dark-primary-text, slider-min: $dark-primary-text, slider-off: rgba($dark-text, 0.26), slider-off-active: $dark-disabled-text, );

// Dark Theme text $light-text: #ffffff; $light-primary-text: $light-text; $light-accent-text: rgba($light-primary-text, 0.7); $light-disabled-text: rgba($light-primary-text, 0.5); $light-dividers: rgba($light-primary-text, 0.12); $light-focused: rgba($light-primary-text, 0.12);

$mat-dark-theme-foreground: ( base: $light-text, divider: $light-dividers, dividers: $light-dividers, disabled: $light-disabled-text, disabled-button: rgba($light-text, 0.3), disabled-text: $light-disabled-text, elevation: black, hint-text: $light-disabled-text, secondary-text: $light-accent-text, accent-text: $light-accent-text, icon: $light-text, icons: $light-text, text: $light-text, slider-min: $light-text, slider-off: rgba($light-text, 0.3), slider-off-active: rgba($light-text, 0.3), );

// Background config // Light bg $light-background: #ffffff; $light-bg-darker-5: darken($light-background, 5%); $light-bg-darker-10: darken($light-background, 10%); $light-bg-darker-20: darken($light-background, 20%); $light-bg-darker-30: darken($light-background, 30%); $light-bg-lighter-5: lighten($light-background, 5%); $dark-bg-tooltip: lighten(#2c2c2c, 20%); $dark-bg-alpha-4: rgba(#2c2c2c, 0.04); $dark-bg-alpha-12: rgba(#2c2c2c, 0.12);

$mat-light-theme-background: ( background: $light-background, status-bar: $light-bg-darker-20, app-bar: $light-bg-darker-5, hover: $dark-bg-alpha-4, card: $light-bg-lighter-5, dialog: $light-bg-lighter-5, tooltip: $dark-bg-tooltip, disabled-button: $dark-bg-alpha-12, raised-button: $light-bg-lighter-5, focused-button: $dark-focused, selected-button: $light-bg-darker-20, selected-disabled-button: $light-bg-darker-30, disabled-button-toggle: $light-bg-darker-10, unselected-chip: $light-bg-darker-10, disabled-list-option: $light-bg-darker-10, );

// Dark bg $dark-background: #2c2c2c; $dark-bg-lighter-5: lighten($dark-background, 5%); $dark-bg-lighter-10: lighten($dark-background, 10%); $dark-bg-lighter-20: lighten($dark-background, 20%); $dark-bg-lighter-30: lighten($dark-background, 30%); $light-bg-alpha-4: rgba(#ffffff, 0.04); $light-bg-alpha-12: rgba(#ffffff, 0.12);

// Background palette for dark themes. $mat-dark-theme-background: ( background: $dark-background, status-bar: $dark-bg-lighter-20, app-bar: $dark-bg-lighter-5, hover: $light-bg-alpha-4, card: $dark-bg-lighter-5, dialog: $dark-bg-lighter-5, tooltip: $dark-bg-lighter-20, disabled-button: $light-bg-alpha-12, raised-button: $dark-bg-lighter-5, focused-button: $light-focused, selected-button: $dark-bg-lighter-20, selected-disabled-button: $dark-bg-lighter-30, disabled-button-toggle: $dark-bg-lighter-10, unselected-chip: $dark-bg-lighter-20, disabled-list-option: $dark-bg-lighter-10, );

@include mat.all-legacy-component-typographies($fontConfig); @include mat.legacy-core();

// Theme Config

body { --primary-color: #178ecd; --primary-lighter-color: #b9ddf0; --primary-darker-color: #0d71ba; --text-primary-color: #{$light-primary-text}; --text-primary-lighter-color: #{$dark-primary-text}; --text-primary-darker-color: #{$light-primary-text}; }
$mat-primary: ( main: #178ecd, lighter: #b9ddf0, darker: #0d71ba, 200: #178ecd, // For slide toggle, contrast : ( main: $light-primary-text, lighter: $dark-primary-text, darker: $light-primary-text, ) ); $theme-primary: mat.define-palette($mat-primary, main, lighter, darker);

body { --accent-color: #ffffff; --accent-lighter-color: #ffffff; --accent-darker-color: #ffffff; --text-accent-color: #{$dark-primary-text}; --text-accent-lighter-color: #{$dark-primary-text}; --text-accent-darker-color: #{$dark-primary-text}; }
$mat-accent: ( main: #ffffff, lighter: #ffffff, darker: #ffffff, 200: #ffffff, // For slide toggle, contrast : ( main: $dark-primary-text, lighter: $dark-primary-text, darker: $dark-primary-text, ) ); $theme-accent: mat.define-palette($mat-accent, main, lighter, darker);

body { --warn-color: #ff0000; --warn-lighter-color: #ffb3b3; --warn-darker-color: #ff0000; --text-warn-color: #{$light-primary-text}; --text-warn-lighter-color: #{$dark-primary-text}; --text-warn-darker-color: #{$light-primary-text}; }
$mat-warn: ( main: #ff0000, lighter: #ffb3b3, darker: #ff0000, 200: #ff0000, // For slide toggle, contrast : ( main: $light-primary-text, lighter: $dark-primary-text, darker: $light-primary-text, ) ); $theme-warn: mat.define-palette($mat-warn, main, lighter, darker);

// $theme: ( // primary: $theme-primary, // accent: $theme-accent, // warn: $theme-warn, // is-dark: false, // foreground: $mat-light-theme-foreground, // background: $mat-light-theme-background, // ); // $altTheme: ( // primary: $theme-primary, // accent: $theme-accent, // warn: $theme-warn, // is-dark: true, // foreground: $mat-dark-theme-foreground, // background: $mat-dark-theme-background, // );

$myTheme: mat.define-light-theme( ( color: ( primary: $theme-primary, accent: $theme-accent, warn: $theme-warn, ), is-dark: false, foreground: $mat-light-theme-foreground, background: $mat-light-theme-background, ) );

$myAltTheme: mat.define-dark-theme( ( color: ( primary: $theme-primary, accent: $theme-accent, warn: $theme-warn, ), is-dark: true, foreground: $mat-dark-theme-foreground, background: $mat-dark-theme-background, ) );

$theme: $myTheme; $altTheme: $myAltTheme;

//for body and normal html components @mixin body-theme($theme) { $_background: map-get($theme, background); $app-background-color: mat-color($_background, background);

body {
  background-color: $app-background-color;
}

}

@mixin dashboardcontent-theme($theme) { $_background: map-get($theme, background); $_foreground: map-get($theme, foreground); $primary: map-get($theme, primary); $accent: map-get($theme, accent); $warn: map-get($theme, warn); $background-color: mat-color($_background, background); $foreground-color: mat-color($_foreground, text); $primary-color: mat-color($primary); $accent-color: mat-color($accent); $warn-color: mat-color($warn);

.dashboardcontent {
  color: $foreground-color;
}
.content-inner{
    background:$background-color;
  
}
footer  p{
    
    color: $accent-color;
}

}

// Theme Init @include mat.all-legacy-component-themes($theme); @include body-theme($theme); @include dashboardcontent-theme($theme);

.theme-alternate { @include mat.all-legacy-component-themes($altTheme); @include body-theme($altTheme); @include dashboardcontent-theme($altTheme); }

// Specific component overrides, pieces that are not in line with the general theming

// Handle buttons appropriately, with respect to line-height .mat-raised-button, .mat-stroked-button, .mat-flat-button { padding: 0 1.15em; margin: 0 .65em; min-width: 3em; line-height: 36.4px }

.mat-standard-chip { padding: .5em .85em; min-height: 2.5em; }

.material-icons { font-size: 24px; font-family: 'Material Icons', 'Material Icons';
.mat-badge-content { font-family: 'Roboto'; } }

Actual Behavior

I tried lots of fixes that got from #28308 , #28286 Issues. still getting same issue my current theme.scss is above

Environment

Angular:17
CDK/Material:17
Browser(s):chrome
Operating System (e.g. Windows, macOS, Ubuntu):windows

Dec 19 '23 11:12 vsvinod

Angular 17 dropped support for both the @angular/material/theming SCSS entrypoint and the legacy components. You need to remove all occurences from your code in order to be able to use Angular 17. All mixins containing legacy- are not available anymore. This could be a bit more clear in the v17.0.0 changelog. But I suppose everything is working as expected.