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

【问题标题】：@include _assert-ascending($grid-breakpoints, "$grid-breakpoints")@include _assert-ascending($grid-breakpoints, "$grid-breakpoints")
【发布时间】：2023-03-16 07:26:01
【问题描述】：

** Bootstrap v5.0.0-beta1**

我想重新定义braakpoints：

文件：https://pastebin.com/WZcb70YE

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...
--------------------

您能帮我了解发生了什么以及如何自定义断点。

【问题讨论】：

标签： twitter-bootstrap bootstrap-5

【解决方案1】：

你需要在最后导入引导程序，它会正常工作。

例如：

@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。

【讨论】：