Bootstrap 5/SASS编译报错：mix函数$color-2参数需为颜色类型

错误信息 #

[09:15:54] Starting 'styles'...
Error in plugin 'sass'
Message:
    node_modules\bootstrap\scss\_functions.scss
Error: argument `$color-2` of `mix($color-1, $color-2, $weight: 50%)` must be a color
        on line 212 of node_modules/bootstrap/scss/_functions.scss, in function `mix`
        from line 212 of node_modules/bootstrap/scss/_functions.scss, in function `shade-color`
        from line 994 of node_modules/bootstrap/scss/_variables.scss
        from line 10 of src/scss/bootstrap.scss
>>   @return mix(black, $color, $weight);

   ----------^

[09:15:56] Finished 'styles' after 2.61 s

相关代码文件 #

bootstrap.scss #

@import "../../node_modules/bootstrap/scss/mixins/banner";
@include bsBanner("");

// custom variables to overwrite the default one
@import "variables"; // custom vars e.g. theme-colors in here

// scss-docs-start import-stack
// Configuration
@import "../../node_modules/bootstrap/scss/functions";
@import "../../node_modules/bootstrap/scss/variables";
@import "../../node_modules/bootstrap/scss/maps";
@import "../../node_modules/bootstrap/scss/mixins";
@import "../../node_modules/bootstrap/scss/utilities";

// Layout & components
@import "../../node_modules/bootstrap/scss/root";
@import "../../node_modules/bootstrap/scss/reboot";
@import "../../node_modules/bootstrap/scss/type";
...

variables.scss #

// // Color system

// // scss-docs-start gray-color-variables
$white:    #fff !default;
// $gray-100: #f8f9fa !default;
// $gray-200: #e9ecef !default;
...
// $gray-800: #343a40 !default;
// $gray-900: #212529 !default;
$black:    #000 !default;

...

//Grays Primary
$gray: #6f7271;
$gray-100: tint-color($gray, 90%);
$gray-200: tint-color($gray, 80%);
...

// Blues Primary
$blue-primary: #3e4765;
$blue-primary-100: tint-color($blue-primary, 90%);
...

// Blues Secondary
$blue-secondary: #00294b;
$blue-secondary-100: tint-color($blue-secondary, 90%);
$blue-secondary-200: tint-color($blue-secondary, 80%);
...

// scss-docs-start theme-color-variables
$primary:       $blue-primary;
$secondary:     $gray;
...

// scss-docs-start theme-colors-map
$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
//   "danger":     $danger,
  "light":      $light,
  "dark":       $dark,
  
  // nmis brand colours
  "blue-secondary": $blue-secondary,
  "blue-secondary-900": $blue-secondary-900,
  ...
);

错误原因 #

1. 导入顺序错误：自定义变量文件variables.scss在Bootstrap的functions.scss之前导入，导致自定义变量中使用的Bootstrap内置Sass函数（tint-color/shade-color）未加载，生成无效的颜色变量。
2. 未定义主题变量：$theme-colors映射中引用了$success、$info、$warning、$light、$dark等未赋值的变量，这些变量被视为null。当Bootstrap内部调用shade-color处理这些null值时，触发mix函数的参数类型错误（要求传入颜色值，实际传入null）。

解决方案 #

1. 调整导入顺序，先加载Bootstrap函数 #

修改bootstrap.scss的导入顺序，确保Bootstrap的函数先加载，再导入自定义变量：

@import "../../node_modules/bootstrap/scss/mixins/banner";
@include bsBanner("");

// 先加载Bootstrap内置函数，确保自定义变量可使用tint-color等方法
@import "../../node_modules/bootstrap/scss/functions";

// custom variables to overwrite the default one
@import "variables"; // custom vars e.g. theme-colors in here

// scss-docs-start import-stack
// Configuration
@import "../../node_modules/bootstrap/scss/variables";
@import "../../node_modules/bootstrap/scss/maps";
@import "../../node_modules/bootstrap/scss/mixins";
@import "../../node_modules/bootstrap/scss/utilities";

// Layout & components
@import "../../node_modules/bootstrap/scss/root";
@import "../../node_modules/bootstrap/scss/reboot";
@import "../../node_modules/bootstrap/scss/type";
...

2. 补全或移除未定义的主题变量 #

方式A：补全变量值

在variables.scss中为缺失的主题变量赋值有效颜色：

// 补全默认主题色变量
$success: #198754;
$info: #0dcaf0;
$warning: #ffc107;
// 用自定义灰度变量定义light和dark
$light: $gray-100;
$dark: $gray-900;

方式B：移除未使用的主题色

如果不需要默认主题色，直接从$theme-colors中删除对应的键：

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  // 移除未定义的success、info、warning等键
  "light":      $light,
  "dark":       $dark,
  
  // nmis brand colours
  "blue-secondary": $blue-secondary,
  "blue-secondary-900": $blue-secondary-900,
  ...
);

3. 验证自定义颜色变量有效性 #

调整导入顺序后，自定义变量中使用的tint-color函数会正常加载，确保$gray-100、$blue-primary-100等变量生成有效的颜色值，避免后续Bootstrap处理时出现类型错误。

内容的提问来源于stack exchange，提问作者Martyn