css - Bootstrap 的 SCSS 无法编译 - 总是得到 "` unit($number )` must be a number"错误

Question

我想在我的元素中本地使用 Bootstaps 网格。
我正在用 Gulp 编译 SCSS。我可以确认这工作正常 - 我能够编译我自己的 scss 文件。
但是，当我添加任何 Bootstrap .scss 文件时，我收到错误:

assets\scss\bootstrap_scss_functions.scss Error: argument $number of unit($number) must be a number

Bootstrap 4.5.3 和 5.0 Alpha 都会出现这种情况。
我的 app.scss 文件如下所示:

@import 'bootstrap_scss/_functions';
@import 'bootstrap_scss/_variables';
@import 'bootstrap_scss/_mixins';

@import 'bootstrap_scss/bootstrap-reboot';
@import 'bootstrap_scss/bootstrap-grid';

我也尝试过 NPM 版本的 Bootstrap，但得到了相同的结果。
有人知道我应该做什么吗？

Answer 1

看_functions.scss的源码和 _variables.scss看起来你正在覆盖 $container-max-widths和/或 $grid-breakpoints变量。
确保两个变量都具有映射中值的数值。默认值为:

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
) !default;

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
) !default;