angular-cli
angular-cli copied to clipboard
angular
building failed sometimes with Can't find stylesheet to import
Command
build
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
about 5% of our pipeline fail with this error
✘ [ERROR] Can't find stylesheet to import.
╷
27 │ @use '@material/ripple/ripple';
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules/@material/button/_button-ripple.scss 27:1 @use
node_modules/@material/button/_button-shared-theme.scss 42:1 @use
node_modules/@material/button/_button-base.scss 35:1 @use
@material/button/_button.scss 30:1 @use
node_modules/@angular/material/button/_button-theme.scss 2:1 @use
node_modules/@angular/material/core/density/private/_all-density.scss 2:1 @forward
@angular/_index.scss 20:1 @use
packages/web/src/theme/palette.scss 3:1 @import
theme.scss 1:9 @import
packages/web/src/app/grid-layout/grid-controls/scroll-controls.component.scss 1:9 root stylesheet [plugin angular-sass]
it happened only one with ng serve and it was very difficult to resolve, my colleague had to uninstall node and install it again
previously he tried to delete the project and clone it again, remove yarn cache but neither work
Minimal Reproduction
it's impossible to reproduce, since even rerunning the same one succeed
it's not code error
this happens even when we were using webpack (we are using the application builder which uses esbuild), I noticed it in versions 15 and 17 of Angular
Exception or Error
2024-02-27T12:22:15.0367412Z - Building...
2024-02-27T12:24:41.4014964Z [31m✘ [41;31m[[41;97mERROR[41;31m][0m [1mCan't find stylesheet to import.
2024-02-27T12:24:41.4015914Z ╷
2024-02-27T12:24:41.4016209Z 27 │ @use '@material/ripple/ripple';
2024-02-27T12:24:41.4016714Z │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2024-02-27T12:24:41.4016908Z ╵
2024-02-27T12:24:41.4017254Z node_modules/@material/button/_button-ripple.scss 27:1 @use
2024-02-27T12:24:41.4017625Z node_modules/@material/button/_button-shared-theme.scss 42:1 @use
2024-02-27T12:24:41.4018003Z node_modules/@material/button/_button-base.scss 35:1 @use
2024-02-27T12:24:41.4018258Z @material/button/_button.scss 30:1 @use
2024-02-27T12:24:41.4018608Z node_modules/@angular/material/button/_button-theme.scss 2:1 @use
2024-02-27T12:24:41.4018980Z node_modules/@angular/material/core/density/private/_all-density.scss 2:1 @forward
2024-02-27T12:24:41.4019247Z @angular/_index.scss 20:1 @use
2024-02-27T12:24:41.4019490Z packages/web/src/theme/palette.scss 3:1 @import
2024-02-27T12:24:41.4019731Z theme.scss 1:9 @import
2024-02-27T12:24:41.4020172Z packages/web/src/app/grid-layout/grid-controls/scroll-controls.component.scss 1:9 root stylesheet[0m [1m[35m[plugin angular-sass][0m
2024-02-27T12:24:41.4020368Z
2024-02-27T12:24:41.4020442Z
2024-02-27T12:24:41.4020738Z [31m✘ [41;31m[[41;97mERROR[41;31m][0m [1mCan't find stylesheet to import.
2024-02-27T12:24:41.4020978Z ╷
2024-02-27T12:24:41.4021240Z 29 │ @use '@material/animation/functions' as functions2;
2024-02-27T12:24:41.4021514Z │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2024-02-27T12:24:41.4021704Z ╵
2024-02-27T12:24:41.4021896Z _ripple.scss 29:1 @import
2024-02-27T12:24:41.4022352Z packages/web/src/app/grid-layout/grid-layout-container/grid-layout-container.component.scss 1:9 root stylesheet[0m [1m[35m[plugin angular-sass][0m
2024-02-27T12:24:41.4022584Z
2024-02-27T12:24:41.4022657Z
2024-02-27T12:24:41.4022930Z [31m✘ [41;31m[[41;97mERROR[41;31m][0m [1mUndefined variable.
2024-02-27T12:24:41.4023156Z ╷
2024-02-27T12:24:41.4023377Z 23 │ opacity: $disabled-opacity;
2024-02-27T12:24:41.4023611Z │ ^^^^^^^^^^^^^^^^^
2024-02-27T12:24:41.4023798Z ╵
2024-02-27T12:24:41.4024214Z packages/web/src/app/global-search/search-result-item/search-result-item.component.scss 23:16 root stylesheet[0m [1m[35m[plugin angular-sass][0m
2024-02-27T12:24:41.4024437Z
2024-02-27T12:24:41.4024509Z
2024-02-27T12:24:41.4024797Z [31m✘ [41;31m[[41;97mERROR[41;31m][0m [1mCan't find stylesheet to import.
2024-02-27T12:24:41.4025021Z ╷
2024-02-27T12:24:41.4033609Z 3 │ @use '@angular/material' as mat;
2024-02-27T12:24:41.4034506Z │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2024-02-27T12:24:41.4035470Z ╵
2024-02-27T12:24:41.4035973Z packages/web/src/theme/palette.scss 3:1 @import
2024-02-27T12:24:41.4036673Z theme.scss 1:9 @import
2024-02-27T12:24:41.4271734Z packages/web/src/app/global-search/global-search-dropdown.component.scss 1:9 root stylesheet[0m [1m[35m[plugin angular-sass][0m
2024-02-27T12:24:42.8133632Z
2024-02-27T12:24:42.8157446Z
2024-02-27T12:24:42.8158532Z [31m✘ [41;31m[[41;97mERROR[41;31m][0m [1mCan't find stylesheet to import.
2024-02-27T12:24:42.8158983Z ╷
2024-02-27T12:24:42.8159309Z 6 │ @use '@material/typography' as mdc-typography;
2024-02-27T12:24:42.8159700Z │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2024-02-27T12:24:42.8159930Z ╵
2024-02-27T12:24:42.8160221Z node_modules/@angular/material/core/typography/_typography.scss 6:1 @forward
2024-02-27T12:24:42.8160603Z _index.scss 12:1 @import
2024-02-27T12:24:42.8161136Z packages/web/src/app/dashboard-header/account-dropdown/account-dropdown.component.scss 2:9 root stylesheet[0m [1m[35m[plugin angular-sass][0m
2024-02-27T12:24:42.8161735Z
2024-02-27T12:24:42.8161870Z
2024-02-27T12:24:42.8162204Z [31m✘ [41;31m[[41;97mERROR[41;31m][0m [1mCan't find stylesheet to import.
2024-02-27T12:24:42.8162564Z ╷
2024-02-27T12:24:42.8162884Z 31 │ @use '@material/feature-targeting/feature-targeting';
2024-02-27T12:24:42.8163278Z │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2024-02-27T12:24:42.8163505Z ╵
2024-02-27T12:24:42.8163775Z node_modules/@material/typography/_typography.scss 31:1 @forward
2024-02-27T12:24:42.8164165Z node_modules/@material/typography/_variables.scss 24:1 @forward
2024-02-27T12:24:42.8164510Z _index.scss 1:1 @import
2024-02-27T12:24:42.8165055Z packages/web/src/app/market-page/market-page-header-actions/market-page-header-actions.component.scss 1:9 root stylesheet[0m [1m[35m[plugin angular-sass][0m
2024-02-27T12:24:42.8165389Z
2024-02-27T12:24:42.8165518Z
2024-02-27T12:24:42.8165889Z [31m✘ [41;31m[[41;97mERROR[41;31m][0m [1mCan't find stylesheet to import.
2024-02-27T12:24:42.8166167Z ╷
2024-02-27T12:24:42.8166509Z 3 │ @use '@angular/material' as mat;
2024-02-27T12:24:42.8166855Z │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2024-02-27T12:24:42.8167583Z ╵
2024-02-27T12:24:42.8168042Z packages/web/src/theme/palette.scss 3:1 @import
2024-02-27T12:24:42.8168494Z theme.scss 1:9 @import
2024-02-27T12:24:42.8169310Z packages/web/src/app/newsletters-and-reports/newsletters-and-reports-page/newsletters-forecasts-page/newsletters-forecasts-card/newsletters-forecasts-card.component.scss 1:10 root stylesheet[0m [1m[35m[plugin angular-sass][0m
2024-02-27T12:24:42.8169737Z
2024-02-27T12:24:42.8169963Z
2024-02-27T12:24:42.8170361Z [31m✘ [41;31m[[41;97mERROR[41;31m][0m [1mCan't find stylesheet to import.
2024-02-27T12:24:42.8170711Z ╷
2024-02-27T12:24:42.8171178Z 6 │ @use '@material/typography' as mdc-typography;
2024-02-27T12:24:42.8171603Z │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2024-02-27T12:24:42.8172011Z ╵
2024-02-27T12:24:42.8172433Z node_modules/@angular/material/core/typography/_typography.scss 6:1 @forward
2024-02-27T12:24:42.8172833Z _index.scss 12:1 @import
2024-02-27T12:24:42.8173661Z packages/web/src/app/newsletters-and-reports/newsletters-and-reports-page/newsletter-table.scss 1:9 @import
2024-02-27T12:24:42.8174465Z packages/web/src/app/newsletters-and-reports/newsletters-and-reports-page/newsletter-notifications-page/newsletter-notifications-table/newsletter-notifications-table.component.scss 1:9 root stylesheet[0m [1m[35m[plugin angular-sass][0m
2024-02-27T12:24:42.8174886Z
2024-02-27T12:24:42.8175107Z
2024-02-27T12:24:42.8175507Z [31m✘ [41;31m[[41;97mERROR[41;31m][0m [1mCan't find stylesheet to import.
2024-02-27T12:24:42.8175875Z ╷
2024-02-27T12:24:42.8176341Z 31 │ @use '@material/feature-targeting/feature-targeting';
2024-02-27T12:24:42.8176745Z │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2024-02-27T12:24:42.8177152Z ╵
2024-02-27T12:24:42.8177573Z node_modules/@material/typography/_typography.scss 31:1 @forward
2024-02-27T12:24:42.8178100Z node_modules/@material/typography/_variables.scss 24:1 @forward
2024-02-27T12:24:42.8178562Z _index.scss 1:1 @import
2024-02-27T12:24:42.8179316Z packages/web/src/app/newsletter-center/newsletter-center/active-newsletter-subscriptions/active-newsletter-subscriptions.component.scss 1:9 root stylesheet[0m [1m[35m[plugin angular-sass][0m
2024-02-27T12:24:42.8179695Z
2024-02-27T12:24:42.8179898Z
2024-02-27T12:24:42.8180297Z [31m✘ [41;31m[[41;97mERROR[41;31m][0m [1mCan't find stylesheet to import.
2024-02-27T12:24:42.8180664Z ╷
2024-02-27T12:24:42.8181115Z 3 │ @use '@angular/material' as mat;
2024-02-27T12:24:42.8181532Z │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2024-02-27T12:24:42.8181925Z ╵
2024-02-27T12:24:42.8182334Z packages/web/src/theme/palette.scss 3:1 @import
2024-02-27T12:24:42.8182702Z theme.scss 1:9 @import
2024-02-27T12:24:42.8183436Z packages/web/src/app/widgets/price-chart-widget/forecast-forbidden-dropdown/forecast-forbidden-dropdown.component.scss 1:9 root stylesheet[0m [1m[35m[plugin angular-sass][0m
2024-02-27T12:24:42.8183780Z
2024-02-27T12:24:42.8183986Z
2024-02-27T12:24:42.8184384Z [31m✘ [41;31m[[41;97mERROR[41;31m][0m [1mCan't find stylesheet to import.
2024-02-27T12:24:42.8184745Z ╷
2024-02-27T12:24:42.8185211Z 6 │ @use '@material/typography' as mdc-typography;
2024-02-27T12:24:42.8185581Z │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2024-02-27T12:24:42.8185982Z ╵
2024-02-27T12:24:42.8186406Z node_modules/@angular/material/core/typography/_typography.scss 6:1 @forward
2024-02-27T12:24:42.8186798Z _index.scss 12:1 @use
2024-02-27T12:24:42.8187522Z packages/web/src/app/dialogs/common/content-selector/recommended-news-layout/recommended-news-layout.component.scss 1:1 root stylesheet[0m [1m[35m[plugin angular-sass][0m
2024-02-27T12:24:42.8187984Z
2024-02-27T12:24:42.8188222Z
2024-02-27T12:24:42.8188610Z [31m✘ [41;31m[[41;97mERROR[41;31m][0m [1mCan't find stylesheet to import.
2024-02-27T12:24:42.8188985Z ╷
2024-02-27T12:24:42.8189468Z 31 │ @use '@material/feature-targeting/feature-targeting';
2024-02-27T12:24:42.8189868Z │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2024-02-27T12:24:42.8190255Z ╵
2024-02-27T12:24:42.8190667Z node_modules/@material/typography/_typography.scss 31:1 @forward
2024-02-27T12:24:42.8191292Z node_modules/@material/typography/_variables.scss 24:1 @forward
2024-02-27T12:24:42.8191773Z _index.scss 1:1 @import
2024-02-27T12:24:42.8192340Z packages/web/src/app/home/no-workspaces/no-workspaces.component.scss 1:9 root stylesheet[0m [1m[35m[plugin angular-sass][0m
2024-02-27T12:24:42.8192647Z
2024-02-27T12:24:42.8192862Z
2024-02-27T12:24:42.8193251Z [31m✘ [41;31m[[41;97mERROR[41;31m][0m [1mUndefined mixin.
2024-02-27T12:24:42.8193659Z ╷
2024-02-27T12:24:42.8193898Z 31 │ @include wrap-text;
2024-02-27T12:24:42.8194156Z │ ^^^^^^^^^^^^^^^^^^
2024-02-27T12:24:42.8194377Z ╵
2024-02-27T12:24:42.8194887Z packages/web/src/app/widgets/time-series/time-series-header-group-cell/time-series-header-group-cell.component.scss 31:5 root stylesheet[0m [1m[35m[plugin angular-sass][0m
2024-02-27T12:24:42.8195179Z
2024-02-27T12:24:42.8195254Z
2024-02-27T12:24:42.8195582Z [31m✘ [41;31m[[41;97mERROR[41;31m][0m [1mCan't find stylesheet to import.
2024-02-27T12:24:42.8195966Z ╷
2024-02-27T12:24:42.8196232Z 3 │ @use '@angular/material' as mat;
2024-02-27T12:24:42.8196501Z │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2024-02-27T12:24:42.8196720Z ╵
2024-02-27T12:24:42.8197049Z packages/web/src/theme/palette.scss 3:1 @import
2024-02-27T12:24:42.8197398Z theme.scss 1:9 @import
2024-02-27T12:24:42.8198137Z packages/web/src/app/widgets/time-series/time-series-header-cell/time-series-header-cell.component.scss 1:9 root stylesheet[0m [1m[35m[plugin angular-sass][0m
2024-02-27T12:24:42.8198477Z
2024-02-27T12:24:42.8198682Z
2024-02-27T12:24:42.8199079Z [31m✘ [41;31m[[41;97mERROR[41;31m][0m [1mCan't find stylesheet to import.
2024-02-27T12:24:42.8199352Z ╷
2024-02-27T12:24:42.8199723Z 6 │ @use '@material/typography' as mdc-typography;
2024-02-27T12:24:42.8200098Z │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2024-02-27T12:24:42.8200344Z ╵
2024-02-27T12:24:42.8200609Z node_modules/@angular/material/core/typography/_typography.scss 6:1 @forward
2024-02-27T12:24:42.8200987Z _index.scss 12:1 @import
2024-02-27T12:24:42.8201508Z packages/web/src/app/unsupported-browser/unsupported-browser/unsupported-browser.component.scss 1:9 root stylesheet[0m [1m[35m[plugin angular-sass][0m
2024-02-27T12:24:42.8201831Z
2024-02-27T12:24:42.8201946Z
2024-02-27T12:24:42.8202284Z [31m✘ [41;31m[[41;97mERROR[41;31m][0m [1mCan't find stylesheet to import.
2024-02-27T12:24:42.8202621Z ╷
2024-02-27T12:24:42.8202941Z 31 │ @use '@material/feature-targeting/feature-targeting';
2024-02-27T12:24:42.8203326Z │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2024-02-27T12:24:42.8203567Z ╵
2024-02-27T12:24:42.8203836Z node_modules/@material/typography/_typography.scss 31:1 @forward
2024-02-27T12:24:42.8204207Z node_modules/@material/typography/_variables.scss 24:1 @forward
2024-02-27T12:24:42.8204501Z _index.scss 1:1 @import
2024-02-27T12:24:42.8204977Z packages/web/src/app/widgets/widget-header/widget-header.component.scss 1:9 root stylesheet[0m [1m[35m[plugin angular-sass][0m
2024-02-27T12:24:42.8205274Z
2024-02-27T12:24:42.8205405Z
2024-02-27T12:24:42.8205726Z [31m✘ [41;31m[[41;97mERROR[41;31m][0m [1mUndefined variable.
2024-02-27T12:24:42.8206051Z ╷
2024-02-27T12:24:42.8206344Z 8 │ font-weight: $font-weight-semibold;
2024-02-27T12:24:42.8206702Z │ ^^^^^^^^^^^^^^^^^^^^^
2024-02-27T12:24:42.8206934Z ╵
2024-02-27T12:24:42.8207427Z packages/web/src/app/widgets/historic-price-widget/historic-price-header/historic-price-header.component.scss 8:16 root stylesheet[0m [1m[35m[plugin angular-sass][0m
2024-02-27T12:24:42.8207890Z
2024-02-27T12:24:42.8208026Z
2024-02-27T12:24:42.8208333Z [31m✘ [41;31m[[41;97mERROR[41;31m][0m [1mCan't find stylesheet to import.
2024-02-27T12:24:42.8208608Z ╷
2024-02-27T12:24:42.8208858Z 3 │ @use '@angular/material' as mat;
2024-02-27T12:24:42.8209126Z │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2024-02-27T12:24:42.8209345Z ╵
2024-02-27T12:24:42.8209573Z packages/web/src/theme/palette.scss 3:1 @import
2024-02-27T12:24:42.8209917Z theme.scss 1:9 @import
2024-02-27T12:24:42.8210461Z packages/web/src/app/date-range-picker/date-range-picker-header/date-range-picker-header.component.scss 1:9 root stylesheet[0m [1m[35m[plugin angular-sass][0m
2024-02-27T12:24:42.8210798Z
2024-02-27T12:24:42.8210914Z
2024-02-27T12:24:42.8211231Z [31m✘ [41;31m[[41;97mERROR[41;31m][0m [1mCan't find stylesheet to import.
2024-02-27T12:24:42.8211586Z ╷
2024-02-27T12:24:42.8211972Z 6 │ @use '@material/typography' as mdc-typography;
2024-02-27T12:24:42.8212349Z │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2024-02-27T12:24:42.8212587Z ╵
2024-02-27T12:24:42.8212869Z node_modules/@angular/material/core/typography/_typography.scss 6:1 @forward
2024-02-27T12:24:42.8213244Z _index.scss 12:1 @import
2024-02-27T12:24:42.8213855Z packages/web/src/app/widgets/jacobsen-widgets/common/jacobsen-widgets-header/jacobsen-widgets-dropdown/jacobsen-widgets-dropdown.component.scss 1:9 root stylesheet[0m [1m[35m[plugin angular-sass][0m
2024-02-27T12:24:42.8214240Z
2024-02-27T12:24:42.8214355Z
2024-02-27T12:24:42.8214672Z [31m✘ [41;31m[[41;97mERROR[41;31m][0m [1mCan't find stylesheet to import.
2024-02-27T12:24:42.8215030Z ╷
2024-02-27T12:24:42.8215334Z 31 │ @use '@material/feature-targeting/feature-targeting';
2024-02-27T12:24:42.8215730Z │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2024-02-27T12:24:42.8215972Z ╵
2024-02-27T12:24:42.8216233Z node_modules/@material/typography/_typography.scss 31:1 @forward
2024-02-27T12:24:42.8216612Z node_modules/@material/typography/_variables.scss 24:1 @forward
2024-02-27T12:24:42.8216892Z _index.scss 1:1 @import
2024-02-27T12:24:42.8217451Z packages/web/src/app/common/search-bar/search-bar-form-field.component.scss 1:9 root stylesheet[0m [1m[35m[plugin angular-sass][0m
2024-02-27T12:24:42.8217762Z
2024-02-27T12:24:42.8217894Z
2024-02-27T12:24:42.8218231Z [31m✘ [41;31m[[41;97mERROR[41;31m][0m [1mUndefined variable.
2024-02-27T12:24:42.8218570Z ╷
2024-02-27T12:24:42.8218851Z 17 │ font-size: $font-size-xl;
2024-02-27T12:24:42.8219180Z │ ^^^^^^^^^^^^^
2024-02-27T12:24:42.8219439Z ╵
2024-02-27T12:24:42.8219970Z packages/web/src/app/dialogs/onboarding-dialog/onboarding-dialog-step/onboarding-dialog-step.component.scss 17:16 root stylesheet[0m [1m[35m[plugin angular-sass][0m
2024-02-27T12:24:42.8220299Z
2024-02-27T12:24:42.8220445Z
2024-02-27T12:24:42.8220789Z [31m✘ [41;31m[[41;97mERROR[41;31m][0m [1mCan't find stylesheet to import.
2024-02-27T12:24:42.8221139Z ╷
2024-02-27T12:24:42.8221434Z 3 │ @use '@angular/material' as mat;
2024-02-27T12:24:42.8221735Z │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2024-02-27T12:24:42.8221976Z ╵
2024-02-27T12:24:42.8222246Z packages/web/src/theme/palette.scss 3:1 @import
2024-02-27T12:24:42.8222550Z theme.scss 1:9 @import
2024-02-27T12:24:42.8223065Z packages/web/src/app/dialogs/common/dialog-header/dialog-header.component.scss 1:9 root stylesheet[0m [1m[35m[plugin angular-sass][0m
2024-02-27T12:24:42.8223461Z
2024-02-27T12:24:42.8223609Z
2024-02-27T12:24:42.8223954Z [31m✘ [41;31m[[41;97mERROR[41;31m][0m [1mCan't find stylesheet to import.
2024-02-27T12:24:42.8224300Z ╷
2024-02-27T12:24:42.8224622Z 6 │ @use '@material/typography' as mdc-typography;
2024-02-27T12:24:42.8224995Z │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2024-02-27T12:24:42.8225231Z ╵
2024-02-27T12:24:42.8225525Z node_modules/@angular/material/core/typography/_typography.scss 6:1 @forward
2024-02-27T12:24:42.8225902Z _index.scss 12:1 @import
2024-02-27T12:24:42.8226449Z packages/web/src/app/components/market-page-types-select/market-page-types-select.component.scss 1:9 root stylesheet[0m [1m[35m[plugin angular-sass][0m
2024-02-27T12:24:42.8226769Z
2024-02-27T12:24:42.8226917Z
2024-02-27T12:24:42.8227262Z [31m✘ [41;31m[[41;97mERROR[41;31m][0m [1mCan't find stylesheet to import.
2024-02-27T12:24:42.8227702Z ╷
2024-02-27T12:24:43.8115573Z 31 │ @use '@material/feature-targeting/feature-targeting';
2024-02-27T12:24:44.8121750Z │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2024-02-27T12:24:44.8122716Z ╵
2024-02-27T12:24:44.8123558Z node_modules/@material/typography/_typography.scss 31:1 @forward
2024-02-27T12:24:44.8124051Z node_modules/@material/typography/_variables.scss 24:1 @forward
2024-02-27T12:24:44.8124596Z _index.scss 1:1 @import
2024-02-27T12:24:44.8125340Z packages/web/src/app/common/stepper/stepper.component.scss 1:9 root stylesheet[0m [1m[35m[plugin angular-sass][0m
2024-02-27T12:24:44.8125671Z
2024-02-27T12:24:44.8125924Z
2024-02-27T12:24:44.8126419Z [31m✘ [41;31m[[41;97mERROR[41;31m][0m [1mUndefined variable.
2024-02-27T12:24:44.8126844Z ╷
2024-02-27T12:24:44.8127348Z 7 │ font-size: $font-size-m;
2024-02-27T12:24:44.8127754Z │ ^^^^^^^^^^^^
2024-02-27T12:24:44.8128255Z ╵
2024-02-27T12:24:44.8128962Z packages/web/src/app/common/download-link/download-link.component.scss 7:14 root stylesheet[0m [1m[35m[plugin angular-sass][0m
2024-02-27T12:24:44.8129332Z
2024-02-27T12:24:44.8129561Z
2024-02-27T12:24:44.8130026Z [31m✘ [41;31m[[41;97mERROR[41;31m][0m [1mCan't find stylesheet to import.
2024-02-27T12:24:44.8130439Z ╷
2024-02-27T12:24:44.8130947Z 3 │ @use '@angular/material' as mat;
2024-02-27T12:24:44.8131317Z │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2024-02-27T12:24:44.8131772Z ╵
2024-02-27T12:24:44.8132209Z packages/web/src/theme/palette.scss 3:1 @import
2024-02-27T12:24:44.8132574Z theme.scss 1:9 @import
2024-02-27T12:24:44.8133102Z packages/web/src/app/common/list/grouped-list.component.scss 1:9 root stylesheet[0m [1m[35m[plugin angular-sass][0m
2024-02-27T12:24:44.8133418Z
2024-02-27T12:24:44.8133578Z
2024-02-27T12:24:44.8133846Z Application bundle generation failed. [146.363 seconds]
Your Environment
Angular CLI: 17.0.3
Node: 20.10.0
Package Manager: yarn 4.0.2
OS: win32 x64
Angular: 17.0.4
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1700.3
@angular-devkit/build-angular 17.0.3
@angular-devkit/core 17.0.3
@angular-devkit/schematics 17.0.3
@angular/cdk 16.2.12
@angular/cli 17.0.3
@angular/material 16.2.12
@schematics/angular 17.0.3
ng-packagr 17.0.2
rxjs 7.8.1
typescript 5.2.2
webpack 5.69.1
zone.js 0.14.2
Anything else relevant?
No response
This appears to be a package manager related issue. The Angular CLI does not control the layout or content of installed packages. Does the issue occur if another package manager is used?
This appears to be a package manager related issue. The Angular CLI does not control the layout or content of installed packages. Does the issue occur if another package manager is used?
We never tried But I can raise this with the team Which package manager do you recommend going to?
I want to add we upgrade from yarn 1.x to 4.0.2, and the issue still exists
@clydin Could you elaborate on how this is a package manager issue? The angular-cli project seems to be using yarn as well, so seems a bit odd to me to blame this issue on yarn while the project is on it as well.
hi @clydin I confirm it's not a yarn issue
- job: Build
dependsOn:
- Cypress_Tests
- Format_Checking
- Unit_Tests
pool:
vmImage: ubuntu-latest
steps:
- task: NodeTool@0
inputs:
versionSpec: '20.x'
displayName: 'Install Node.js'
- script: |
corepack enable
yarn install --immutable
displayName: 'install dependencies'
- script: |
yarn nx run web-app:build:prod
retryCountOnTaskFailure: 3 <<<<---------
displayName: 'nx build'
- task: PublishBuildArtifacts@1
inputs:
pathToPublish: 'dist/apps/web-app/browser'
artifactName: Fusion.Dashboard
this is my build script, it fails now then on retry 1 or 2 times it passes
if it was yarn it wouldn't have been possible for it to pass in on a retry since it's the same node_modules
Unfortunately without a reproduction it's hard to debug and understand what is the problem here.
@alan-agius4
how can I reproduce it if it happens 5% of the times? if you want to get access to our repo I can talk with my manager about the procedure, you (or anyone from the Angular side) will most probably need to sign NDA
The same problem sometimes occurs in my GitLab pipeline, approximately 1% of the time.
We have the same problem. Same as https://github.com/angular/angular-cli/issues/25018 and https://github.com/angular/angular-cli/issues/26389.
We are also getting this issue here:
In addition to the errors similar to posted in https://github.com/angular/angular-cli/issues/25018 ("Undefined variable", "Undefined mixin", "Module loop"), there are also warnings like this
[WARNING] Comments in CSS use "/* ... */" instead of "//" [js-comment-in-css]
We've tried both to point @use directly at the specific partials instead of @angular/material (https://github.com/angular/angular-cli/issues/25018#issuecomment-1593724769), and to tweak the stylePreprocessorOptions setting (https://github.com/angular/angular-cli/issues/25018#issuecomment-1619151058), but neither work.
This never happens in local, only in CI.
It seems that the problem might be related to the typography partials?
I saw some suggesting to make a local copy of whatever typography function you need in your styles, but I feel it's highly impractical, both for the daisy-chain effect of functions you would have to copy, and also in terms of maintainability.
We have the same problem.
./src/app/common/app-footer/app-footer.component.scss?ngResource - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js): Can't find stylesheet to import. ╷ 26 │ @use '@material/feature-targeting/feature-targeting'; │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ╵ node_modules/@material/fab/_extended-fab-theme.scss 26:1 @use node_modules/@angular/material/button/_fab-theme.scss 3:1 @use node_modules/@angular/material/core/theming/_color-api-backwards-compatibility.scss 3:1 @forward node_modules/@angular/material/_index.scss 12:1 @use src/app/common/app-footer/app-footer.component.scss 2:1 root stylesheet
each time it fails on different stylesheet.
Angular version is 18.0.2
I encountered same error while building my Angular application.
35.36 - Building...
35.36
84.96 Application bundle generation failed. [49.600 seconds]
84.96
84.98 ✘ [ERROR] Can't find stylesheet to import.
84.98 ╷
84.98 26 │ @use '@material/feature-targeting/feature-targeting';
84.98 │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
84.98 ╵
84.98 node_modules/@material/line-ripple/_line-ripple-theme.scss 26:1 @use
84.98 node_modules/@material/line-ripple/_line-ripple.scss 29:1 @forward
84.98 node_modules/@material/line-ripple/_mixins.scss 24:1 @use
84.98 node_modules/@material/textfield/_text-field.scss 36:1 @forward
84.98 node_modules/@material/textfield/_mixins.scss 24:1 @forward
84.98 node_modules/@material/textfield/_index.scss 2:1 @use
84.98 node_modules/@angular/material/core/tokens/m2/mat/_form-field.scss 3:1 @use
84.98 node_modules/@angular/material/core/tokens/m2/_index.scss 20:1 @use
84.98 node_modules/@angular/material/core/tokens/_m3-tokens.scss 6:1 @use
84.98 node_modules/@angular/material/core/theming/_definition.scss 6:1 @forward
84.98 node_modules/@angular/material/_index.scss 7:1 @use
84.98 projects/<some_path>.scss 1:1 root stylesheet [plugin angular-sass]
84.98
84.98
Any fix for that?
Same here. I was hoping the issue would be fixed with Angular 17 but it's still there. Not on every single build, though. It's quite flaky as some have already said. I'm quite disappointed that this issue does not seem to get any attention at all ...
Unfortunately, there's not much we can investigate without a reproducible example, making it difficult to determine the cause of the issue. It's also worth noting that in our end-to-end tests, which cover various scenarios and utilize both NPM and Yarn as package managers, we have not encountered this error.
Does this also happen when not using NX but using the @angular/cli directly?
Does this also happen when not using NX but using the @angular/cli directly?
My team has been seeing this same issue, using just the angular/cli directly. Like everyone else has mentioned, it only happens in CI, never locally.
One observation is could this be based on the CI platform? Someone called out Gitlab and the screenshot in the original issue looks like it is from Azure DevOps.
@tanner-wisniewski we're seeing it on GitHub Actions. So seems to happen across the board.
I use the @angular/cli directly, too. If I simply build the application myself by "ng build --configuration production", everything's fine. The error occured not even once doing so. However, the error occurs in CI and if I try to build a docker image locally. CI breaks way more often than the local docker image build, though. No idea if that information helps locating the problem.
I think it's related to the technical parameters of the builder, in azure it's 2 core + 7 GB ram and 14 GB disk In developer machines it's much higher than that I will try to setup a VM with low core and ram to see if it actually happen there
Unfortunately, there's not much we can investigate without a reproducible example, making it difficult to determine the cause of the issue. It's also worth noting that in our end-to-end tests, which cover various scenarios and utilize both NPM and Yarn as package managers, we have not encountered this error.
Does this also happen when not using NX but using the @angular/cli directly?
@alan-agius4 Tell me how I can help you to investigate?
Just in case this helps anyone else, we have been encountering the same issue in the same manner: only in our CI builds in AWS and never when building locally (mostly macOS ARM dev envs outside of containers). Yesterday, we had a bit of a breakthrough, and we were finally able to reproduce the failure in a local Docker container, albeit only intermittently.
We just completed a batch run of local builds to compare 4 different Docker Node images: node:18.20.3-alpine3.19, node:20.14.0-alpine3.19, node:18.20.3-slim, node:20.14.0-slim. With 20 runs of each of the 4 images, the results were 5 total failures: 4 in Node 20 Alpine, 1 in Node 18 Alpine, and 0 in either Slim image. Our codebase, which contains ~500 components, and a roughly similar # of scss files, was constant across all builds. Only difference between the builds was the base docker image version.
We have changed our CI builds from using alpine to slim, and so far, the results are looking much better. We don't have any hypothesis yet as to why an alpine image would lead to this issue, or why it would only do so intermittently, but at this point, we have enough data to want to avoid them in our environment.
Hi @bmarcotte can you share this setup? I'd like to try this with an empty angular project to see if the size of the project matter at all or not
Hi @bmarcotte can you share this setup? I'd like to try this with an empty angular project to see if the size of the project matter at all or not
@robertIsaac I would only be able to share the docker files & and small bash script that invokes them. Everything else is proprietary code that couldn't be shared as is.
Which I think really gets at the impasse we're at with investigating this. If this problem is more likely to occur in large codebases, but most of our codebases are proprietary, then most of the people reporting the issue are not going to be able to submit a reproducible example, like the Angular team keeps asking for.
So, if anyone happens to know of a large, open source application written in Angular, maybe we could use that as a reference platform for testing issues like this?
@bmarcotte
docker files & and small bash script
that's what I meant
if anyone happens to know of a large, open source application written in Angular
what about Angular material?
Just in case this helps anyone else, we have been encountering the same issue in the same manner: only in our CI builds in AWS and never when building locally (mostly macOS ARM dev envs outside of containers). Yesterday, we had a bit of a breakthrough, and we were finally able to reproduce the failure in a local Docker container, albeit only intermittently.
We just completed a batch run of local builds to compare 4 different Docker Node images: node:18.20.3-alpine3.19, node:20.14.0-alpine3.19, node:18.20.3-slim, node:20.14.0-slim. With 20 runs of each of the 4 images, the results were 5 total failures: 4 in Node 20 Alpine, 1 in Node 18 Alpine, and 0 in either Slim image. Our codebase, which contains ~500 components, and a roughly similar # of scss files, was constant across all builds. Only difference between the builds was the base docker image version.
We have changed our CI builds from using alpine to slim, and so far, the results are looking much better. We don't have any hypothesis yet as to why an alpine image would lead to this issue, or why it would only do so intermittently, but at this point, we have enough data to want to avoid them in our environment.
We use github actions and tried to run build as docker run --rm --volume "$PWD":/home/node/app --workdir /home/node/app node:20-slim npm run build -- --configuration production --localize and, unfortunately the same result
./src/app/module/homepage/homepage.component.scss?ngResource - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js): Can't find stylesheet to import. ╷ 32 │ @use '@material/floating-label/mixins' as floating-label-mixins; │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ╵ node_modules/@material/notched-outline/_notched-outline-theme.scss 32:1 @forward node_modules/@material/notched-outline/_variables.scss 24:1 @use node_modules/@material/textfield/_variables.scss 27:1 @forward node_modules/@material/textfield/_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 @use node_modules/@angular/material/core/tokens/_m3-tokens.scss 6:1 @use node_modules/@angular/material/core/theming/_definition.scss 6:1 @forward node_modules/@angular/material/_index.scss 7:1 @use src/app/module/homepage/homepage.component.scss 2:1 root stylesheet
While poking around the Material repo yesterday, I ran across a ticket, angular/components#26603, from over a year ago, describing very similar errors. There's a comment from a user named @Carniatto, who posted a link to a repo he created to reproduce this issue. I made a fork of that repo, and added on some of the script and Docker pieces that I mentioned here previously. I ran 100 batches of 2 builds each (two different Node versions), and saw 11 failures total. Although that's not as high of a failure rate as we've seen we our larger proprietary code builds, at least we now have a publicly accessible repo that can reproduce the issue:
https://github.com/bmarcotte/sass-import-issue-repro
Is this enough for the Angular team to start investigating the issue, @alan-agius4?
While poking around the Material repo yesterday, I ran across a ticket, angular/components#26603, from over a year ago, describing very similar errors. There's a comment from a user named @Carniatto, who posted a link to a repo he created to reproduce this issue. I made a fork of that repo, and added on some of the script and Docker pieces that I mentioned here previously. I ran 100 batches of 2 builds each (two different Node versions), and saw 11 failures total. Although that's not as high of a failure rate as we've seen we our larger proprietary code builds, at least we now have a publicly accessible repo that can reproduce the issue:
https://github.com/bmarcotte/sass-import-issue-repro
Is this enough for the Angular team to start investigating the issue, @alan-agius4?
Thanks for the mention
For us, the resolution was taking so long that we actually worked around this issue. We decided to make all our theming hardcores CSS variables.
This is not ideal since you cannot grab colors from the theme defined on Angular Material, but we needed to move on.
We have changed our CI builds from using alpine to slim, and so far, the results are looking much better. We don't have any hypothesis yet as to why an alpine image would lead to this issue, or why it would only do so intermittently, but at this point, we have enough data to want to avoid them in our environment.
We tried this and switched to 22-slim - and so far it really looks much better - many thanks for sharing @bmarcotte!
Thanks for the reproduction, @bmarcotte and @Carniatto. I ran the test four times with 20, 50, 100, and 200 builds, respectively. Out of a total of 370 builds, there were no failed builds.
$ uname -a
Linux XXXXXX 6.6.15-2rodete2-amd64 #1 SMP PREEMPT_DYNAMIC Debian 6.6.15-2rodete2 (2024-03-19) x86_64 GNU/Linux
$ docker -v
Docker version 20.10.21, build baeda1f
$ ./run-tests.sh 10
...
[Wed Jun 26 08:21:14 AM UTC 2024] All batches completed
[Wed Jun 26 08:21:14 AM UTC 2024] Total runs: 20, failed: 0
$ ./run-tests.sh 25
...
[Wed Jun 26 09:40:30 AM UTC 2024] All batches completed
[Wed Jun 26 09:40:30 AM UTC 2024] Total runs: 50, failed: 0
$ ./run-tests.sh 50
...
[Wed Jun 26 01:12:43 PM UTC 2024] All batches completed
[Wed Jun 26 01:12:43 PM UTC 2024] Total runs: 100, failed: 0
$ ./run-tests.sh 100
...
[Wed Jun 26 03:53:34 PM UTC 2024] All batches completed
[Wed Jun 26 03:53:34 PM UTC 2024] Total runs: 200, failed: 0
While I can't completely rule out a bug in the Angular CLI, it's highly unlikely. Additionally, this issue seems to occur only with Docker, which the CLI doesn't have any special logic for. Module resolution relies on the location and availability of files in the system. If the file structure, availability, and access on disk remain consistent, so should the resolution across different builds.
The intermittent nature of the problem suggests it's not an Angular CLI bug, as the same code path is used for all builds. Builds are hermetic, and the same input should consistently produce the same output.
@alan-agius4 Do you happen to know how many CPUs your Docker environment is configured to use? Most of my previous testing was done with a limit of 4 cpus. In some further testing today, I noticed that if I set that lower, to 1 or 2 cpus, the error rate increased significantly (sometimes over 50%), and if I set it higher to 8, the failures basically disappeared.
Note that I only saw that difference when changing it via Resource Allocation > CPU limit in the Settings tab of Docker Desktop (for Mac), which I think sets a limit for the entire Docker engine. Setting a cpu resource limit per container, via docker-compose.yaml (i.e. deploy.resources.limits.cpus=xxx) did not seem to have an effect (other than run time of the build).
If that observation is also seen by others, perhaps sass-loader, or something else in the sass toolchain, is hitting a timeout threshold under high CPU usage that it doesn't encounter when spread out over more cores?
@bmarcotte, that's a great observation. By default, the CLI uses a maximum of 4 workers because, in the past, there wasn't a reliable way to determine the actual available CPUs within containers.
However, Node.js recently introduced a new API that provides more accurate values when used within containers (see this pull request). This feature is available starting from version 18.0.5. Could you try updating to the latest patch and see if the issue persists?
You can also limit the number of workers by setting the environment variable NG_BUILD_MAX_WORKERS=<number>.
In my environment, Docker can use 24 CPUs.
@bmarcotte I noticed the same here, setting it to 2 CPU make the rate more than 50%, I actually mentioned this before https://github.com/angular/angular-cli/issues/27167#issuecomment-2163001161
@alan-agius4 did you try to limit your docker for 2/3/4 CPUs to test?
update: using Azure configuration of 2 CPU and 7 GB now I have a similar error rate Total runs: 20, failed: 4
We see the bugs on a root server with 12 CPUs without Docker. Ubuntu 22.04
