Hi,
Am referring Infragistics theme in scss file but getting compile error
Error : Module build failed (saas-loader/dist/cjs.js), SAAS error cant find style sheet to import
i have tried below combinations
@use "@infragisitcs/igniteui-angular/theming" as *
@use " ~@infragistics/igniteui-angular/theming" as *
@use "node_modules/@infragistics/igniteui-angular/theming" as *
what is the issue here. using angular version 15
** for some reason am not able to copy/paste while creating this post
Please check out our Update Guide From 14.2.x to 15.0.x, where the required setup for the theming module since version 15.0.x is explained. In case you have upgraded to version 15, I assume this configuration is what must be missing for you, as there have been changes introduced.
These are namely the "stylePreprocessorOptions” configuration in the angular.json file and the dependency on the igniteu-theming package.
Once these are setup correctly, the theming module can be imported in the style files as follows:
// free version @use 'igniteui-angular/theming' as *; // licensed version: @use '@infragistics/igniteui-angular/theming' as *;
Additionally, I can suggest referring to any of the samples in our documentation, such as the ones from this topic, in order to check out how theming is configured. All samples’ code can be viewed and edited in StackBlitz.
If you are still facing difficulties, please, provide more details, such as the error output, so we can assist you.
Best regards, Bozhidara Pachilova Associate Software Developer
i have not upgraded we have created from scratch with 15.x version. but after adding the "stylePreprocessoroptions" am not getting any error
but UI is not reflecting the grid it shows as text and not in table format. unfortunately am not able to paste or attach an image but wat i can say is theming is not applied
here is my code
HTML
<igx-grid [data]="data" [autoGenerate]="true"> </igx-grid>
any update on this issue ?
i have updated angular and infragistics to 16.x also and tried still same issue persists. compiling is fine but display same issue as shown in previous images
Hello Peru,
I am wondering if you had invoked the required SASS functions and mixins in your main style file, that are needed in order for the default global theme to be applied, for example:
@use 'igniteui-angular/theming' as *; $palette: $light-material-palette; $schema: $light-material-schema; @include core(); @include typography(); @include theme( $palette: $palette, $schema: $schema );
You can find more information about configuring the global theme in this topic of our documentation. As you will read there, the core, typography and theme mixins are required.
Additionally, the following classes should be added to the body element in the index.html:
<body class="ig-typography ig-scrollbar">
As mentioned in my previous reply as well, this configuration can be viewed in any of the samples in our documentation.
Please, follow this suggestion and if you require any further assistance on the matter, please, let me know.
Last but not least, since you mentioned creating an app from scratch, in general, we recommend adding the Ignite UI for Angular library as well as adding Ignite UI for Angular components by leveraging the Ignite UI for Angular Schematics. They come with the added benefit of automatically configuring the above theming-related setup and others. More details about the schematics can be found here.
Adding the library in this way can be achieved with the 'ng add' command: ng add igniteui-angular.