如何解决@include _assert-ascending($grid-breakpoints, "$grid-breakpoints")
** 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,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...
--------------------
你能帮我理解发生了什么以及如何自定义断点。
解决方法
您需要在最后导入 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
。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。