@infragistics update causing `SassError: Can't find stylesheet to import`

[ricardosaracino]

Description

I just updated @infragistics/igniteui-angular from 14 to 15

@use "igniteui-angular/theming" as *;

is causing

./src/app/shared/ui-snackbar/ui-success-snackbar/ui-success-snackbar.component.scss?ngResource - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
7 │ @use 'igniteui-theming/sass/color/functions' as color;
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  node_modules\@infragistics\igniteui-angular\lib\core\styles\themes\_core.scss 7:1      @forward
  @infragistics\igniteui-angular\_index.scss 1:1                                         @use
  src\app\shared\ui-snackbar\ui-success-snackbar\ui-success-snackbar.component.scss 1:1  root stylesheet

I have included this igniteui-theming package that i noticed in an example. But even when I go to the _core.scss my IDE wont resolve it on the @infragistics project but it does on the igniteui-angular.

What am i missing??!??!?

Packages

 "dependencies": {
    "@angular/animations": "^15.0.3",
    "@angular/cdk": "^15.0.2",
    "@angular/common": "^15.0.3",
    "@angular/compiler": "^15.0.3",
    "@angular/core": "^15.0.3",
    "@angular/forms": "^15.0.3",
    "@angular/material": "^15.0.2",
    "@angular/platform-browser": "^15.0.3",
    "@angular/platform-browser-dynamic": "^15.0.3",
    "@angular/router": "^15.0.3",
    "@fontsource/titillium-web": "^4.5.9",
    "@fortawesome/fontawesome-free": "^6.2.1",
    "@infragistics/igniteui-angular": "15.0.3",
    "@ngrx/effects": "^15.0.0",
    "@ngrx/router-store": "^15.0.0",
    "@ngrx/store": "15.0.0",
    "@ngrx/store-devtools": "^15.0.0",
    "@ngx-translate/core": "^14.0.0",
    "@ngx-translate/http-loader": "^7.0.0",
    "@sentry/angular": "^7.25.0",
    "@sentry/tracing": "^7.25.0",
    "@types/file-saver": "^2.0.5",
    "accounting": "^0.4.1",
    "angular-mentions": "^1.5.0",
    "bootstrap": "^5.2.3",
    "date-fns": "^2.29.3",
    "file-saver": "^2.0.5",
    "igniteui-theming": "^1.2.0",
    "jszip": "^3.10.1",
    "lodash.isequal": "^4.5.0",
    "material-icons": "^1.13.1",
    "ngx-permissions": "^14.0.0",
    "rxjs": "~7.6.0",
    "zone.js": "~0.12.0"
  }

this is not resolving

[Lipata]

Hey, @ricardosaracino.

We will update migrations to include the following code with the next patch and you will not get that error. Meanwhile you can update angular.json:

    "build": {
      "options": {
        "stylePreprocessorOptions": {
            "includePaths": ["node_modules"]
        }
      }
    }

https://github.com/IgniteUI/igniteui-angular/issues/12439#issuecomment-1342910179

[ricardosaracino]

That did fix the issue!!!

I never noticed but you might want to add that the igniteui-theming package is needed as well.

[grosch-intl]

@Lipata It seems like just changing to node_modules is a bad idea. Wouldn't we end up getting things we don't expect from other packages, and isn't that a ton more work during compilation to look through everything?

Also, if somebody is using the newer versions of yarn, that don't have a node_modules, then what?

[ricardosaracino]

perhaps a more explict path node_modules/igniteui-theming (i did not test this)

[grosch-intl]

@ricardosaracino That didn't work for me, using node_modules/igniteui_theming