Sass error "isn't a valid CSS value" in ionic app

Viewed 1256

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

1 Answers

Try as following: theme folder:

:root { /** primary **/ --ion-color-primary: #3880ff; }

Then your CSS:

background-color: var(--ion-color-primary);

Goodluck!

Related