@include _assert-ascending($grid-breakpoints, "$grid-breakpoints")

Question

** Bootstrap v5.0.0-beta1**

我想重新定义 braakpoints：

custom.scss

@import "bootstrap-5.0.0-beta1/scss/variables";

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

输出

Not Watching...
--------------------
Compiling Sass/Scss Files: 
/home/michael/Desktop/bootstrap/bootstrap-5.0.0-beta1/scss/bootstrap-grid.scss
/home/michael/Desktop/bootstrap/bootstrap-5.0.0-beta1/scss/bootstrap-reboot.scss
/home/michael/Desktop/bootstrap/bootstrap-5.0.0-beta1/scss/bootstrap-utilities.scss
/home/michael/Desktop/bootstrap/bootstrap-5.0.0-beta1/scss/bootstrap.scss
/home/michael/Desktop/bootstrap/bootstrap-5.0.0-beta1/site/assets/scss/docs.scss
/home/michael/Desktop/bootstrap/custom.scss
--------------------
Generated :
/home/michael/Desktop/bootstrap/css/bootstrap-grid.css
/home/michael/Desktop/bootstrap/css/bootstrap-grid.css.map
--------------------
Generated :
/home/michael/Desktop/bootstrap/css/bootstrap-reboot.css
/home/michael/Desktop/bootstrap/css/bootstrap-reboot.css.map
--------------------
Generated :
/home/michael/Desktop/bootstrap/css/bootstrap-utilities.css
/home/michael/Desktop/bootstrap/css/bootstrap-utilities.css.map
--------------------
Autoprefix Error
Can not find grid areas: sidebar, main
--------------------
Autoprefix Error
Can not find grid areas: intro, toc, content
--------------------
Autoprefix Error
Can not find grid areas: intro, toc, content
--------------------
Generated :
/home/michael/Desktop/bootstrap/css/bootstrap.css
/home/michael/Desktop/bootstrap/css/bootstrap.css.map
--------------------
Compilation Error
Error: no mixin named -assert-ascending
        on line 307 of home/michael/Desktop/bootstrap/bootstrap-5.0.0-beta1/scss/_variables.scss
        from line 1 of sass/home/michael/Desktop/bootstrap/custom.scss
>> @include _assert-ascending($grid-breakpoints, "$grid-breakpoints");

   ---------^

--------------------
Generated :
/home/michael/Desktop/bootstrap/css/docs.css
/home/michael/Desktop/bootstrap/css/docs.css.map
--------------------
Watching...
--------------------

你能帮我了解发生了什么以及如何自定义断点吗？

Answer 1

你需要在最后导入bootstrap，这样就可以了。

例如：

@import "bootstrap/functions";
@import "bootstrap/variables";

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

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

@import "bootstrap";

此外，请记住断点从 xs 到 xxl。

@include _assert-ascending($grid-breakpoints, "$grid-breakpoints")

@include _assert-ascending($grid-breakpoints, "$grid-breakpoints")

twitter-bootstrap

bootstrap-5