离子应用程序中的Sass错误“不是有效的CSS值”

Question

我终于决定创建一个帖子，因为我已经搜索了一个多星期，我的错误。我将把我的ionic3项目转移到ionic6。我遇到了一个Sass错误：

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

这边是边线

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

下面是$colors变量

$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  )
);

这是颜色函数

@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;
}

请帮我找出我的错误

Answer 1

尝试如下:主题文件夹：

：根{ /**主**/ -离子-颜色-主键：#3880 ion；}

然后你的CSS：

背景颜色:var(-离子-颜色-主色)；

祝你好运！