bug(material): Can't find style sheet to import(@use '@angular/cdk')

[HARIPRASADNEELAMOHAN]

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

Getting below material error after migrating angular from v13 to v14.The project also consist of Angular library.

The error occurs while running the build library command for our project.

Error After Build: Error: Command failed: scss-bundle -p ./ --includePaths ./lib/theming -e ./lib/theming/prebuilt/internal.scss -o ./dist/lib/theming/internal.scss [22:12:04] erro: There is an error in your styles: [22:12:04] erro: Can't find stylesheet to import. [22:12:04] erro: ╷ [22:12:04] erro: 1 │ @use '@angular/cdk'; [22:12:04] erro: │ ^^^^^^^^^^^^^^^^^^^ [22:12:04] erro: ╵ [22:12:04] erro: node_modules\@angular\material\core\style_menu-common.scss 1:1 @forward [22:12:04] erro: node_modules\@angular\material_index.scss 33:1 @use [22:12:04] erro: stdin 1:1 root stylesheet on line (1, 1)

Package.josn: { "dependencies": { "@angular/animations": "^14.3.0", "@angular/cdk": "^14.2.7", "@angular/common": "^14.3.0", "@angular/compiler": "^14.3.0", "@angular/core": "^14.3.0", "@angular/forms": "^14.3.0", "@angular/material": "^14.2.7", "@angular/platform-browser": "^14.3.0", "@angular/platform-browser-dynamic": "^14.3.0", "@angular/router": "^14.3.0", "file-saver": "^2.0.0", "highlight.js": "^9.15.10", "rxjs": "~6.6.3", "tslib": "^2.2.0", "zone.js": "~0.11.4" }, "devDependencies": { "@angular-devkit/build-angular": "^14.2.12", "@angular/cli": "14.2.12", "@angular/compiler-cli": "^14.3.0", "@angular/language-service": "^14.3.0", "@types/file-saver": "^2.0.1", "@types/highcharts": "^5.0.22", "@types/jasmine": "~3.6.0", "@types/jasminewd2": "~2.0.3", "@types/node": "^12.11.1", "browser-sync": "^2.29.3", "codelyzer": "^6.0.0", "fs-extra": "^10.0.0", "glob": "^7.1.7", "gulp": "^4.0.2", "gulp-concat": "^2.6.1", "gulp-sass": "^5.1.0", "gulp-scss-combine": "^1.0.0", "husky": "^4.3.0", "jasmine-core": "^3.8.0", "jasmine-spec-reporter": "~5.0.0", "js-beautify": "^1.13.0", "karma": "~6.3.2", "karma-chrome-launcher": "~3.1.0", "karma-coverage-istanbul-reporter": "~3.0.2", "karma-jasmine": "~4.0.0", "karma-jasmine-html-reporter": "^1.5.0", "lint-staged": "^10.4.0", "ncp": "^2.0.0", "ng-packagr": "^14.2.2", "prettier": "^2.1.2", "pretty-quick": "^3.0.2", "protractor": "~7.0.0", "scss-bundle": "^3.1.1", "stylelint": "^13.7.2", "stylelint-order": "^4.1.0", "ts-node": "~8.3.0", "tslint": "~6.1.3", "typescript": "~4.6.4" }, "husky": { "hooks": { "pre-commit": "lint-staged" } }, "lint-staged": { ".html": [ "js-beautify", "git add" ], ".ts": [ "pretty-quick --staged", "tslint --fix", "git add" ], "*.scss": [ "stylelint --fix", "git add" ] } }

Reproduction

StackBlitz link: Steps to reproduce:

Expected Behavior

It should compile properly

Actual Behavior

Style compilation fails and throws the can't find style sheet error.

Environment

• Angular: 14.2.12
• CDK/Material: ^14.2.7
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[wagnermaciel]

This seems like something has gone wrong in your node_modules. Could you try uninstalling and reinstalling your packages?

[HARIPRASADNEELAMOHAN]

This seems like something has gone wrong in your node_modules. Could you try uninstalling and reinstalling your packages?

Do i need to uninstall and reinstall the cdk and material package alone??

[wagnermaciel]

No, you should be able to just run rm -rf node_modules/ && npm i to reinstall your packages

[HARIPRASADNEELAMOHAN]

No, you should be able to just run rm -rf node_modules/ && npm i to reinstall your packages

i tried but no hope still the same problem

node_modules\@angular\material\core\style_menu-common.scss Error: Can't find stylesheet to import. ╷ 1 │ @use '@angular/cdk'; │ ^^^^^^^^^^^^^^^^^^^ ╵ node_modules\@angular\material\core\style_menu-common.scss 1:1 @forward node_modules\@angular\material_index.scss 33:1 @use lib\theming\prebuilt\xpo-internal.scss 1:1 root stylesheet

[HARIPRASADNEELAMOHAN]

This seems like something has gone wrong in your node_modules. Could you try uninstalling and reinstalling your packages?

FYI, for CDK and material version 13 latest its working fine. After the 14 upgrade only i am facing this issue.