bug(material): Can't find style sheet to import(@use '@angular/cdk') #27523
Description
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:
1.
2.
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