离子应用程序中的 Sass 错误"isn't a valid CSS value"

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

这里行侧菜单.scss

.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

尝试如下操作： 主题文件夹：

：根 {/**主要**/--离子颜色原色：#3880ff; }

然后你的 CSS：

背景颜色：var(--离子颜色原色(;

祝你好运！