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?
  • 2680
    Offline posted in reply to Sampat Ponnaganti

    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

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