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

user_1433268 0
Viewed 675

I want to use Bootstaps grids locally in my project.

I am compiling SCSS with Gulp. I can confirm this works fine - I am able to compile my own scss files.

However, when I add any Bootstrap .scss file I get the error:

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

This occurrs both with Bootstrap 4.5.3 and 5.0 Alpha.

My app.scss file looks like:

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

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

I've also tried the NPM version of Bootstrap, but get the same results.

Would anyone know what I should be doin?

twitter-bootstrap gulp sass css
1 Answers

Looking at the source code of _functions.scss and _variables.scss looks like you are overriding either $container-max-widths and/or $grid-breakpoints variable(s).

Make sure both variables have numeric value for the value in map. Default values are:

$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;
user_11778140
Related