building failed sometimes with Can't find stylesheet to import

[robertIsaac]

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

[clydin]

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?

[robertIsaac]

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

[kristofdho]

@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.

[robertIsaac]

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

[alan-agius4]

Unfortunately without a reproduction it's hard to debug and understand what is the problem here.

[robertIsaac]

@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

[florian-wagner-dev]

The same problem sometimes occurs in my GitLab pipeline, approximately 1% of the time.

[alessandro-verdura-maersk]

We have the same problem. Same as #25018 and #26389.

We are also getting this issue here:

In addition to the errors similar to posted in #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 (#25018 (comment)), and to tweak the stylePreprocessorOptions setting (#25018 (comment)), 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.

[anter-x]

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

[jp-sft]

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?

[MelanieW97]

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 ...

[alan-agius4]

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?