Bootstrap 的 SCSS 无法编译 - 总是出现“`unit($number)` must be a number”错误答案

【问题标题】：Bootstrap's SCSS fails to compile - always getting "`unit($number)` must be a number" errorBootstrap 的 SCSS 无法编译 - 总是出现“`unit($number)` must be a number”错误
【发布时间】：2021-02-05 01:48:58
【问题描述】：

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

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

但是，当我添加任何 Bootstrap .scss 文件时，我得到了错误：

assets\scss\bootstrap_scss_functions.scss 错误：参数$number unit($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，但得到了相同的结果。

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

【问题讨论】：

Bootstrap 4.5.3 没有定义任何 $number 变量（不确定其他版本），因此它必须是您的自定义变量。不确定您的 bootstrap_scss_functions.scss 的外观如何，但可以确定的是，您是否真的定义了 $number ？
@Fahmi 不，我没有定义。查看文件错误的行是@if $prev-num == null or unit($num) == "%" or unit($prev-num) == "%" {

标签： css twitter-bootstrap sass gulp

【解决方案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;

【讨论】：