Am getting similar errors to a patch made to fix Ignite UI

[PostalMike]

Hello,

I get that the fix for these issues were unique for Ignite UI(see code block). We are not using Ignite UI. So I'm not sure of how to got about fixing this.

I'm taking one of our projects and testing out Dependabot actually. Found some 9 issues where a PR could not be created by the Dependabot workflow due to conflicts or upgrade issues.

Upgraded from Angular 14 to 15 and got the same errors but not from using Ignite UI.

`./src/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
╷
10 │ font-family: $main-font !important;
│ ^^^^^^^^^^
╵
src\scss\base_base.scss 10:16 @use
src\styles.scss 16:1 root stylesheet

./src/styles.scss?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
╷
2 │ @import "~@progress/kendo-theme-bootstrap/dist/all.scss";
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
src\styles.scss 2:9 root stylesheet`

I've been keeping it simple and thinking along the lines of 'Heck, don't complicate things. The files ARE where the errors say they can't be found. Solve this very resolvable path issue, don't go down the garden path.'

My end goal here is an upgrade path to resolve all Dependabot issues and to give us a fully secure Angular app. Also to pitch why we should have our external / internet facing apps monitored by CodeQL and Dependabot.

Would converting to Ignite UI from whatever we're using resolve these issues?

If no, what would be the path to be followed?

Thanks,

Mike

[ddaribo]

Hi @PostalMike,

Could you please clarify which fix are you referring to? If having to assume, yes, such errors have been encountered by our library users after upgrading from Angular and Ignite UI for Angular version 14 to 15. The particular reason for Ignite UI being that as of version 15, there has been introduced a dependency on the “igniteui-theming” package. More about this can be read in our Update Guide documentation topic, under the “From 14.2.x to 15.0.x” section here.

The manual change required for the Sass @use rules to identify the correct path to the corresponding Sass module, in Ignite UI for Angular’s case is to add the following preprocessor configuration in the angular.json file:

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

,which allows our theming module to be used in style files like this:

@use '@infragistics/igniteui-angular/theming' as *;

This basically allows for a more convenient import of the module. For instance, the alternative would be to import the file forwarding the Sass module from the library with a relative path. The below is also the case for library type projects, as the stylePreprocessorOptions configuration is not available for them:

@use '../../node_modules/@infragistics/igniteui-angular/lib/core/styles/themes/_index.scss' as *;

This being the case for our library, I am afraid we cannot provide assistance regarding the “~@progress/kendo-theme-bootstrap” import indicated by the error stack trace. My suggestion is to contact the corresponding library provider support or refer to their documentation in case there is something that would indicate the possible root causes of this behavior.

Regarding the “dependapot” issues and the other configurations you have mentioned, I am not sure this would be within the scope here, as I am wondering if these errors are not encountered by merely serving the app after upgrading to Angular version 15?

I hope the above info provides some insights and also please, feel free to share your progress on resolving the errors.