Issues with theming after migration to v13/14

After migrating from version 11 to 14 (1 step at a time), I’m having issues with the custom components themes. Components styles do not follow the provided themes anymore.

Used version:

“@infragistics/igniteui-angular”: “^14.0.2”,

In my scss:

@import ‘igniteui-angular/lib/core/styles/themes/index’;

$igx-dark-palette: palette(…);

$custom-grid-summary-dark-theme: grid-summary-theme(

    $palette: $igx-dark-palette,

    $background-color: rgba(variables.$dark-theme-primary, .6),

    $label-color: rgba(black, 0.6),

    $result-color: rgb(255,255,255),

    $border-color: transparent,

);

.dark-theme {

    @include dark-theme($igx-dark-palette);

    @include grid-summary($custom-grid-summary-dark-theme);

}

I tried to switch the @import to `@use “igniteui-angular/theming” as *;` as per documentation but then I get an error “Can’t find stylesheet to import. Problem persist after deleting node_modules and running npm install again.

Any idea what the problem could be?

Hello Benoit,

Thank you for reaching out.

I noticed that you are using the licensed version of Ignite UI for Angular:

[quote user=”AA95E6F56993BA503B1419660333A745FD7E54E2″]"@infragistics/igniteui-angular": "^14.0.2",[/quote]

and you are trying to import the themes for the free version:

[quote user=”AA95E6F56993BA503B1419660333A745FD7E54E2″]I tried to switch the @import to `@use "igniteui-angular/theming" as *;`[/quote]

Can you please try to import the themes using the path for licensed version and let me know if this worked.

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

Regards,
Viktor Kombov
Entry Level Software Developer
Infragistics, Inc.

Hello, Is there a solution for this issue?

I'm using licensed version:

/* See: http://ko.infragistics.com/…/themes.html */

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

@forward '@infragistics/igniteui-angular/theming';

I get this error

./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.
╷
1 │ @use 'igniteui-theming/sass/color/functions' as *;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules/@infragistics/igniteui-angular/lib/core/styles/base/_mixins.scss 1:1 @forward
node_modules/@infragistics/igniteui-angular/lib/core/styles/base/_index.scss 2:1 @use
node_modules/@infragistics/igniteui-angular/lib/core/styles/themes/_core.scss 6:1 @forward
@infragistics/igniteui-angular/_index.scss 1:1 @use
src/styles.scss 5:1 root stylesheet

My package.json

"@infragistics/igniteui-angular": "^15.1.5",

I don't see theming directory in @infragistics/igniteui-angular/ in node_module. I installed the package multiple times.

Hi Sampat,

Since I see that the Ignite UI for Angular version you are using is 15, I am wondering if you have followed thе manual steps from the “From 14.2.x to 15.0.x” update guide in our documentation?

Mainly, the following “stylePreprocessorOptions” configuration has to be added in the angular.json:

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

My assumption is that this is what is missing on your side.

Just to clarify, the reason you are not finding the theming module as a directory is that it is rather a path to the module, pointing to the original stylesheet:

"exports": {
..
    "./theming": {
      "sass": "./lib/core/styles/themes/_index.scss"
    },
    "./themes": {
      "sass": "./lib/core/styles/themes/_index.scss"
    },
…
}

The exports object is part of the package.json file, located in @infragistics/igniteui-angular.

Please, try adding the preprocessor configuration in your app and let me know if it resolves the build error. Also, please, keep in mind that we recommend creating separate threads or support cases for individual queries. This is to ensure that all your issues are addressed correctly. Thank you for understanding.

Best regards,

Bozhidara Pachilova