Can't find stylesheet to import with v18

Command

add, build, e2e, new, version

Is this a regression?

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

The previous version in which this bug was not present was

No response

Description

When I upgraded to Angular version 18, the npm installation was successful. However, when I tried to build the project, it threw an error related to global.scss. I followed the steps in this link: https://stackoverflow.com/questions/78549649/could-not-find-angular-material-core-theme-angular-18, but the issue is still not resolved.

Error Message screenPrint:

Package.Json

{
  "name": "mypay",
  "version": "0.0.1",
  "author": "Serverless solutions",
  "homepage": "https://www.serverless-solutions.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^18.0.0",
    "@angular/cdk": "^18.0.0",
    "@angular/common": "^18.0.0",
    "@angular/core": "^18.0.0",
    "@angular/fire": "^18.0.1",
    "@angular/forms": "^18.0.0",
    "@angular/material": "^18.1.0",
    "@angular/platform-browser": "^18.0.0",
    "@angular/platform-browser-dynamic": "^18.0.0",
    "@angular/router": "^18.0.0",
    "@awesome-cordova-plugins/core": "^6.6.0",
    "@awesome-cordova-plugins/file": "^6.6.0",
    "@awesome-cordova-plugins/file-opener": "^6.6.0",
    "@awesome-cordova-plugins/fingerprint-aio": "^6.8.0",
    "@awesome-cordova-plugins/firebase-analytics": "^6.6.0",
    "@awesome-cordova-plugins/firebase-crashlytics": "^6.6.0",
    "@awesome-cordova-plugins/google-analytics": "^6.6.0",
    "@awesome-cordova-plugins/open-native-settings": "^6.6.0",
    "@capacitor/android": "6.1.0",
    "@capacitor/app": "6.0.0",
    "@capacitor/core": "6.1.0",
    "@capacitor/haptics": "6.0.0",
    "@capacitor/ios": "6.1.0",
    "@capacitor/keyboard": "6.0.1",
    "@capacitor/preferences": "6.0.1",
    "@capacitor/status-bar": "6.0.0",
    "@eslint/config-array": "^0.17.0",
    "@ionic/angular": "^8.0.0",
    "@kolkov/angular-editor": "~3.0.0-beta.0",
    "@mui/material": "^5.6.4",
    "@ngx-translate/core": "^15.0.0",
    "@ngx-translate/http-loader": "^8.0.0",
    "@npmcli/package-json": "^5.2.0",
    "chart.js": "^4.4.3",
    "firebase": "^10.0.0",
    "html2pdf.js": "^0.10.2",
    "moment": "^2.30.1",
    "ng2-charts": "^6.0.0-beta.1",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "^0.14.0"

  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^18.0.0",
    "@angular-eslint/builder": "^18.0.0",
    "@angular-eslint/eslint-plugin": "^18.0.0",
    "@angular-eslint/eslint-plugin-template": "^18.0.0",
    "@angular-eslint/template-parser": "^18.0.0",
    "@angular/cli": "^18.0.0",
    "@angular/compiler": "^18.0.0",
    "@angular/compiler-cli": "^18.0.0",
    "@angular/language-service": "^18.0.0",
    "@capacitor/cli": "6.1.0",
    "@ionic/angular-toolkit": "^11.0.1",
    "@types/jasmine": "~5.1.0",
    "@typescript-eslint/eslint-plugin": "^6.0.0",
    "@typescript-eslint/parser": "^6.0.0",
    "eslint": "^8.57.0",
    "eslint-plugin-import": "^2.29.1",
    "eslint-plugin-jsdoc": "^48.2.1",
    "eslint-plugin-prefer-arrow": "1.2.2",
    "jasmine-core": "~5.1.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.4.0"
  },
  "description": "An Ionic project"
}

Minimal Reproduction

### Global SCSS

/*
 * App Global CSS
 * ----------------------------------------------------------------------------
 * Put style rules here that you want to apply globally. These styles are for
 * the entire app and not just one component. Additionally, this file can be
 * used as an entry point to import other CSS/Sass files to be included in the
 * output CSS.
 * For more information on global stylesheets, visit the documentation:
 * https://ionicframework.com/docs/layout/global-stylesheets
 */

/* Core CSS required for Ionic components to work properly */
@import "~@ionic/angular/css/core.css";

/* Basic CSS for apps built with Ionic */
@import "~@ionic/angular/css/normalize.css";
@import "~@ionic/angular/css/structure.css";
@import "~@ionic/angular/css/typography.css";
@import "~@ionic/angular/css/display.css";

/* Optional CSS utils that can be commented out */
@import "~@ionic/angular/css/padding.css";
@import "~@ionic/angular/css/float-elements.css";
@import "~@ionic/angular/css/text-alignment.css";
@import "~@ionic/angular/css/text-transformation.css";
@import "~@ionic/angular/css/flex-utils.css";

@import "src/app/styles/common.scss";

// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@import "@angular/material/theming";

// 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/
$EmployeePortal-primary: mat-palette($mat-indigo);
$EmployeePortal-accent: mat-palette($mat-pink, A200, A100, A400);

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

// Create the theme object. A theme consists of configurations for individual
// theming systems such as "color" or "typography".
$EmployeePortal-theme: mat-light-theme(
  (
    color: (
      primary: $EmployeePortal-primary,
      accent: $EmployeePortal-accent,
      warn: $EmployeePortal-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($EmployeePortal-theme);

/* You can add global styles to this file, and also import other style files */

html,
body {
    height: 100%;
}
body {
    margin: 0;
    font-family: Roboto, "Helvetica Neue", sans-serif;
    font-size: 14px;
    .title {
        font-weight: 500;
        font-size: 16px;
    }
    h1 {
        font-size: 32px;
    }

    h2 {
        font-size: 28px;
    }

    h3 {
        font-size: 1.5rem;
    }

    h4 {
        font-size: 24px;
    }

    h5 {
        font-size: 1rem;
    }

    h6 {
        font-size: 16px;
    }

    .page-title {
        font-size: 16px;
        margin: 0;
        color: #2c3652;
        font-weight: 500;
    }
}

.mat-paginator {
    background: #f9f8f8;
}
.mat-table {
    background: #f9f8f8;
}
.mat-card {
    background: #f9f8f8;
}
.print-option {
    display: none;
}

.paycheck-table {
    tr.mat-row,
    tr.mat-footer-row {
        cursor: pointer;
    }
    .highlight {
        background-color: #eeeeee;
    }
    .highlight-first-row:first-child {
        background-color: #eeeeee;
    }
}
@media print {
    .nav-container {
        visibility: hidden;
        height: 0;
    }
    .side-nav-item {
        display: none;
    }
    .nav-sidenav {
        //Override inline style
        display: none !important;
    }

    .sidenav-image {
        display: none;
    }

    .page-navigation {
        display: none;
    }

    .print-option {
        display: block;
        margin: 0px;
    }
}

.text-center {
    text-align: center;
}

@media #{$mobile} {
    .mat-form-field {
        display: block;
        width: 100%;
    }
    button.mat-focus-indicator.mat-stroked-button.mat-button-base.mat-primary {
        width: 100%;
    }
    .mat-paginator-page-size-select {
        max-width: 56px;
    }
    .column {
        .mat-chip-list-wrapper {
            margin: 0px;
        }
    }
    .angular-editor-wrapper {
        padding-bottom: 1.34375em;
    }
}

ion-img {
    display: block;
    height: 100%;
    object-fit: inherit;
    float: right;
    object-position: inherit;
}
.button-inner {
    display: flex;
    position: relative;
    flex-flow: row nowrap;
    flex-shrink: 0;
    align-items: center;
    justify-content: end;
    width: 35px !important;
    float: right;
}
button {
    background: none;
}
ion-popover {
    --width: 200px;
}
.popoverlabel {
    margin-left: 15px;
}
.helvetic-12 {
    font-size: 12px;
    font-family: "Helvetica Neue", helvetica, sans-serif;
    font-weight: 400;
}
.helvetic-14 {
    font-size: 14px;
    font-family: "Helvetica Neue", helvetica, sans-serif;
    font-weight: 400;
}
.ionPage-content {
    --padding-bottom: 20px;
    --padding-end: 20px;
    --padding-start: 20px;
    --padding-top: 20px;
}
small {
    font-weight: 500;
    font-size: 14px;
}
.mat-sort-header-container {
    .mat-sort-header-content {
        text-align: left;
    }
}
.scroll-y {
    overflow-y: var(--overflow);
    overscroll-behavior-y: initial;
}
.footerCommon {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    font-size: 14px;

    color: #7c7c8e;
    p {
        margin: 2px;
    }
}

Exception or Error

PS C:\Users\Toverto Solutions\Documents\GitHub\EmployeePortalMobile> ionic build
> ng.cmd run app:build
✔ Browser application bundle generation complete.

Warning: C:\Users\Toverto Solutions\Documents\GitHub\EmployeePortalMobile\node_modules\canvg\lib\index.es.js depends on 'core-js/modules/es.array.index-of.js'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.dev/tools/cli/build#configuring-commonjs-dependencies

Warning: C:\Users\Toverto Solutions\Documents\GitHub\EmployeePortalMobile\node_modules\canvg\lib\index.es.js depends on 'core-js/modules/es.array.iterator.js'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.dev/tools/cli/build#configuring-commonjs-dependencies

Warning: C:\Users\Toverto Solutions\Documents\GitHub\EmployeePortalMobile\node_modules\canvg\lib\index.es.js depends on 'core-js/modules/es.array.reduce.js'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.dev/tools/cli/build#configuring-commonjs-dependencies

Warning: C:\Users\Toverto Solutions\Documents\GitHub\EmployeePortalMobile\node_modules\canvg\lib\index.es.js depends on 'core-js/modules/es.array.reverse.js'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.dev/tools/cli/build#configuring-commonjs-dependencies

Warning: C:\Users\Toverto Solutions\Documents\GitHub\EmployeePortalMobile\node_modules\canvg\lib\index.es.js depends on 'core-js/modules/es.promise.js'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.dev/tools/cli/build#configuring-commonjs-dependencies

Warning: C:\Users\Toverto Solutions\Documents\GitHub\EmployeePortalMobile\node_modules\canvg\lib\index.es.js depends on 'core-js/modules/es.regexp.to-string.js'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.dev/tools/cli/build#configuring-commonjs-dependencies

Warning: C:\Users\Toverto Solutions\Documents\GitHub\EmployeePortalMobile\node_modules\canvg\lib\index.es.js depends on 'core-js/modules/es.string.ends-with.js'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.dev/tools/cli/build#configuring-commonjs-dependencies

Warning: C:\Users\Toverto Solutions\Documents\GitHub\EmployeePortalMobile\node_modules\canvg\lib\index.es.js depends on 'core-js/modules/es.string.includes.js'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.dev/tools/cli/build#configuring-commonjs-dependencies

Warning: C:\Users\Toverto Solutions\Documents\GitHub\EmployeePortalMobile\node_modules\canvg\lib\index.es.js depends on 'core-js/modules/es.string.match.js'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.dev/tools/cli/build#configuring-commonjs-dependencies

Warning: C:\Users\Toverto Solutions\Documents\GitHub\EmployeePortalMobile\node_modules\canvg\lib\index.es.js depends on 'core-js/modules/es.string.replace.js'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.dev/tools/cli/build#configuring-commonjs-dependencies

Warning: C:\Users\Toverto Solutions\Documents\GitHub\EmployeePortalMobile\node_modules\canvg\lib\index.es.js depends on 'core-js/modules/es.string.split.js'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.dev/tools/cli/build#configuring-commonjs-dependencies

Warning: C:\Users\Toverto Solutions\Documents\GitHub\EmployeePortalMobile\node_modules\canvg\lib\index.es.js depends on 'core-js/modules/es.string.starts-with.js'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.dev/tools/cli/build#configuring-commonjs-dependencies

Warning: C:\Users\Toverto Solutions\Documents\GitHub\EmployeePortalMobile\node_modules\canvg\lib\index.es.js depends on 'core-js/modules/es.string.trim.js'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.dev/tools/cli/build#configuring-commonjs-dependencies

Warning: C:\Users\Toverto Solutions\Documents\GitHub\EmployeePortalMobile\node_modules\canvg\lib\index.es.js depends on 'core-js/modules/web.dom-collections.iterator.js'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.dev/tools/cli/build#configuring-commonjs-dependencies

Warning: C:\Users\Toverto Solutions\Documents\GitHub\EmployeePortalMobile\node_modules\canvg\lib\index.es.js depends on 'raf'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.dev/tools/cli/build#configuring-commonjs-dependencies

Warning: C:\Users\Toverto Solutions\Documents\GitHub\EmployeePortalMobile\node_modules\canvg\lib\index.es.js depends on 'rgbcolor'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.dev/tools/cli/build#configuring-commonjs-dependencies

Warning: C:\Users\Toverto Solutions\Documents\GitHub\EmployeePortalMobile\src\app\app.component.ts depends on 'lodash'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.dev/tools/cli/build#configuring-commonjs-dependencies

Warning: C:\Users\Toverto Solutions\Documents\GitHub\EmployeePortalMobile\src\app\services\auth\auth.service.ts depends on 'moment'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.dev/tools/cli/build#configuring-commonjs-dependencies

Warning: C:\Users\Toverto Solutions\Documents\GitHub\EmployeePortalMobile\src\app\shared\print-template\print-template.component.ts depends on 'html2pdf.js'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.dev/tools/cli/build#configuring-commonjs-dependencies

./src/polyfills.ts:54:0-27 - Error: Module not found: Error: Package path ./dist/zone is not exported from package C:\Users\Toverto Solutions\Documents\GitHub\EmployeePortalMobile\node_modules\zone.js (see exports field in C:\Users\Toverto Solutions\Documents\GitHub\EmployeePortalMobile\node_modules\zone.js\package.json)

./src/global.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Can't find stylesheet to import.
   ╷
32 │ @import "@angular/material/theming";
   │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  src\global.scss 32:9  root stylesheet

./src/global.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.
   ╷
31 │ @import "@angular/material/theming";
   │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  src\global.scss 31:9  root stylesheet

[ERROR] An error occurred while running subprocess ng.

        ng.cmd run app:build exited with exit code 1.

        Re-running this command with the --verbose flag may provide more information.
PS C:\Users\Toverto Solutions\Documents\GitHub\EmployeePortalMobile>

Your Environment

{
  "name": "mypay",
  "version": "0.0.1",
  "author": "Serverless solutions",
  "homepage": "https://www.serverless-solutions.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^18.0.0",
    "@angular/cdk": "^18.0.0",
    "@angular/common": "^18.0.0",
    "@angular/core": "^18.0.0",
    "@angular/fire": "^18.0.1",
    "@angular/forms": "^18.0.0",
    "@angular/material": "^18.1.0",
    "@angular/platform-browser": "^18.0.0",
    "@angular/platform-browser-dynamic": "^18.0.0",
    "@angular/router": "^18.0.0",
    "@awesome-cordova-plugins/core": "^6.6.0",
    "@awesome-cordova-plugins/file": "^6.6.0",
    "@awesome-cordova-plugins/file-opener": "^6.6.0",
    "@awesome-cordova-plugins/fingerprint-aio": "^6.8.0",
    "@awesome-cordova-plugins/firebase-analytics": "^6.6.0",
    "@awesome-cordova-plugins/firebase-crashlytics": "^6.6.0",
    "@awesome-cordova-plugins/google-analytics": "^6.6.0",
    "@awesome-cordova-plugins/open-native-settings": "^6.6.0",
    "@capacitor/android": "6.1.0",
    "@capacitor/app": "6.0.0",
    "@capacitor/core": "6.1.0",
    "@capacitor/haptics": "6.0.0",
    "@capacitor/ios": "6.1.0",
    "@capacitor/keyboard": "6.0.1",
    "@capacitor/preferences": "6.0.1",
    "@capacitor/status-bar": "6.0.0",
    "@eslint/config-array": "^0.17.0",
    "@ionic/angular": "^8.0.0",
    "@kolkov/angular-editor": "~3.0.0-beta.0",
    "@mui/material": "^5.6.4",
    "@ngx-translate/core": "^15.0.0",
    "@ngx-translate/http-loader": "^8.0.0",
    "@npmcli/package-json": "^5.2.0",
    "chart.js": "^4.4.3",
    "firebase": "^10.0.0",
    "html2pdf.js": "^0.10.2",
    "moment": "^2.30.1",
    "ng2-charts": "^6.0.0-beta.1",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "^0.14.0"

  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^18.0.0",
    "@angular-eslint/builder": "^18.0.0",
    "@angular-eslint/eslint-plugin": "^18.0.0",
    "@angular-eslint/eslint-plugin-template": "^18.0.0",
    "@angular-eslint/template-parser": "^18.0.0",
    "@angular/cli": "^18.0.0",
    "@angular/compiler": "^18.0.0",
    "@angular/compiler-cli": "^18.0.0",
    "@angular/language-service": "^18.0.0",
    "@capacitor/cli": "6.1.0",
    "@ionic/angular-toolkit": "^11.0.1",
    "@types/jasmine": "~5.1.0",
    "@typescript-eslint/eslint-plugin": "^6.0.0",
    "@typescript-eslint/parser": "^6.0.0",
    "eslint": "^8.57.0",
    "eslint-plugin-import": "^2.29.1",
    "eslint-plugin-jsdoc": "^48.2.1",
    "eslint-plugin-prefer-arrow": "1.2.2",
    "jasmine-core": "~5.1.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.4.0"
  },
  "description": "An Ionic project"
}

Anything else relevant?