引导的SCSS无法编译-总是得到“单位($number)”必须是一个数字“错误

Question

我想在我的项目中在本地使用Bootstaps网格。

我正在用Gulp编写SCSS。我可以确认这个工作正常-我能够编译我自己的scss文件。

但是，当我添加任何引导程序.scss文件时，都会得到以下错误：

assets\scss\bootstrap_scss_functions.scss错误:参数$number of unit($number)必须是一个数字

这种情况在Bootstrap 4.5.3和5.0Alpha中都会出现。

我的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;