Forums Ignite UI for Angular
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Benoit Tassin
15
Issues with theming after migration to v13/14
posted

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?
Parents
No Data
Reply
  • 640
    Offline posted

    Hello Benoit,

    Thank you for reaching out.

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

    Benoit Tassin said:
    "@infragistics/igniteui-angular": "^14.0.2",

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

    Benoit Tassin said:
    I tried to switch the @import to `@use "igniteui-angular/theming" as *;`

    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.

Children
  • 15
    Offline posted in reply to Viktor Kombov

    Hello, Is there a solution for this issue?

    I'm using licensed version:

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