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';

我也试过 Bootstrap 的 NPM 版本，但得到了相同的结果。

有人知道我应该做什么吗？

Answer 1

查看 _functions.scss and _variables.scss 的源代码看起来您正在覆盖 $container-max-widths and/or $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;

Bootstrap 的 SCSS 编译失败——总是出现“`unit($number)` must be a number”错误

Bootstrap's SCSS fails to compile - always getting "`unit($number)` must be a number" error

css

sass

twitter-bootstrap

gulp