I finally decided to create a post as I’m searching since more than one week where my error. I’m moving my ionic3 project to ionic6. And I have a Sass error occuring :

ERROR in ./src/theme/common.scss  (./node_modules/css-loader/dist/cjs.js ??ref--13-1!./node_modules/postcss-loader/src ??embedded!./node_modules/sass-loader/dist/cjs.js ??ref--13-3!./src/theme/common.scss) Module build failed (from ./node_modules/sass-loader/dist/cjs.js):  SassError: (primary: #387ef5, secondary: #ae75e7, danger: #f4344f, light: #f4f4f4,  dark: #222, favorite: #ffaab6, walkthrough: (base: #132d59, contrast: #FFFFFF),  walkthrough-alt: (base: #ae75e7, contrast: #FFFFFF), walkthrough-header: (base: transparent, contrast: #FFFFFF),  header: (base: #132d59, contrast: #FFFFFF), header-alt: (base: #ae75e7, contrast: #FFFFFF),  button: (base: #132d59, contrast: #FFFFFF), button-alt: (base: #ae75e7, contrast: #FFFFFF),  background: (base: #e0e0e0, contrast: rgba(51, 51, 51, 0.8)), tabs-navigation: (base: #FFFFFF,  contrast: #c2c2c2)) isn't a valid CSS value.   ╷ 5 │         background-color: color($colors, background, base);   │                                 ^^^^^^^   ╵   src/theme/common/side-menu.scss 5:27 

Here the line the side-menu.scss

.menu-content     {         background-color: color($colors, background, base);     } 

Here is the $colors variable

$colors: (   primary:          #387ef5,   secondary:        #ae75e7,   danger:           #f4344f,   light:            #f4f4f4,   dark:             #222,   favorite:         rgb(255, 170, 182),   walkthrough:(       base: $theme-color-1,     contrast: $white  ),   walkthrough-alt:(   base: $theme-color-2,     contrast: $white  ),   walkthrough-header:(base: transparent,        contrast: $white  ),   header:(            base: $theme-color-1,     contrast: $white  ),   header-alt:(        base: $theme-color-2,     contrast: $white  ),   button:(            base: $theme-color-1,     contrast: $white  ),   button-alt:(        base: $theme-color-2,     contrast: $white  ),   background:(        base: $white-c,           contrast: $black-b  ),   tabs-navigation:(   base: $white,             contrast: $white-d  ) ); 

Here is the color function

@function color($map, $color-name: 'background', $color-key: null) {   $color-value: map-get($map, $color-name);    // If we were given a map we need to grab the value   // of the key that is passed or the base key   @if(type-of($color-value) == "map") {     @if($color-key) {       $color-value: map-fetch($map, $color-name, $color-key);     } @else {       $color-value: map-fetch($map, $color-name, base);     }   }    @if (type-of($color-value) == color) {     @return $color-value;   }   @return color-error($color-value, $color-name); }  @function map-fetch($map, $keys...) {   @each $key in $keys {     $map: map-get($map, $key);   }    @return $map; } 

Please help me out find my error