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
Lewis Ross
135
Scss error after updating to Angular 16 from 15
posted

I am in the process of trying to upgrade from Angular version 15 to 16. After updating the necessary packages I am getting the error:

HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Undefined variable.
╷
117 │ @error 'The theme for #{map.get($map, 'name')} does not contain #{$key}';
│ ^^^^
╵
node_modules\igniteui-theming\sass\themes\_functions.scss 117:41 var-get()
node_modules\@infragistics\igniteui-angular\lib\core\styles\components\bottom-nav\_bottom-nav-theme.scss 125:16 bottom-nav()
node_modules\@infragistics\igniteui-angular\lib\core\styles\themes\generators\_base.scss 155:9 theme-internal()
node_modules\@infragistics\igniteui-angular\lib\core\styles\themes\generators\_base.scss 42:5 theme()
node_modules\@infragistics\igniteui-angular\lib\core\styles\themes\generators\_base.scss 667:5 light-theme()
src\styles\rhi-light-theme.scss 6:3 @import
src\styles.scss 23:9 root stylesheet



My styles.scss is set as below:

//rhi styles

@import './styles/rhi';

// igx-color function has been renamed to color which is the same as the bootstrap function. Declare all infragistics colours before importing bootstrap.
// Bootstrap
@import "node_modules/bootstrap/scss/bootstrap";

// IMPORTANT: Make sure you always include igx-core first!
@include core();

// Configure application fonts with igx-typography
@include typography(
    $font-family: "'Montserrat', sans-serif",
    $type-scale: $rhi-type-scale
);

// Initialise ignite ui themes
@include theme($rhi-color-palette);

//Import rhi themes
@import './styles/rhi-light-theme';
@import './styles/rhi-dark-theme';


The issue seems to be specifically with:

$rhi-color-palette


in rhi.scss I have:

// Import the IgniteUI themes library first
@use '@infragistics/igniteui-angular/theming' as *;
@forward '@infragistics/igniteui-angular/theming';

// CSS Reset, comment out if not required or using a different module
@import 'node_modules/minireset.css/minireset';

// Import our defined palettes and schemas
@import './igx-palettes';
@import './igx-type-scales.scss';
.....


in igx-palettes.scss we have:


$rhi-color-palette: palette(
    $primary: $rhi-blue-color,
    $secondary: $rhi-pink-color,
    $surface: #fff,
    $info: color($light-material-palette, 'info'),
    $success: color($light-material-palette, 'success'),
    $error: color($light-material-palette, 'error'),
    $warn: color($light-material-palette, 'warn'),
);

$rhi-color-palette-dark: palette(
    $primary: $rhi-pink-color,
    $secondary: $rhi-pink-color,
    $gray: $white-color,
    $surface: #222,
    $info: color($light-material-palette, 'info'),
    $success: color($light-material-palette, 'success'),
    $error: color($light-material-palette, 'error'),
    $warn: color($light-material-palette, 'warn'),
);



and then in the light-theme.scss there is:

.rhi-light-theme {
  @include light-theme($rhi-color-palette);

.....


and in dark-theme.scss:

.rhi-dark-theme {
 @include dark-theme($rhi-color-palette-dark);

.....



I know it's to do with 
$rhi-color-palette as if I remove these lines from styles.scss:
@include theme($rhi-color-palette);

@import './styles/rhi-light-theme';
@import './styles/rhi-dark-theme';


then the application will build. 


And then also within the light them file and dark theme files, if I remove the lines:

  @include light-theme($rhi-color-palette);
 @include dark-theme($rhi-color-palette-dark);



then I can still include the lines
@import './styles/rhi-light-theme';
@import './styles/rhi-dark-theme';


in styles.scss and it will build. So the issue seems to stem to how the palette is set up but I'm not sure what needs to change?



Parents
No Data
Reply
  • 160
    Offline posted

    Hello Lewis,

    Thank you for posting to Infragistics Community!

    As per our Versioning Wiki, it’s important to ensure that the major version of the Ignite UI for Angular library matches the major version of Angular you’re using. This alignment is crucial for the proper functionality of our components, as they often depend on Angular's API.

    Therefore, I recommend upgrading the 'igniteui-angular' packages in your application to match the Angular version you're currently using.

    Regarding the theming issues you're experiencing, I haven't been able to replicate the error with a similar setup on my end. I’ve attached a sample implementation for your review. Please try reproducing the issue in this sample and share it back with me for further investigation. This will help me better understand the problem and devise an appropriate solution.

    In the meantime, upgrading to the matching major versions, as mentioned above, is a crucial first step, as the version mismatch may be the underlying cause of the issue.

    Best regards,
    Arkan Ahmedov
    Infragistics

    themeIgniteUI16.zip

Children