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
55
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?