如何使用CDN在bootstrap 4中创建新的断点？

Question

我使用BootstrapCDN.其他样式用sass编写并由gulp构建.我需要创建自己的breakpionts.如果我使用CDN,是否可以制作它们？我无法弄清楚该怎么做.我必须创建这些断点:

--breakpoint-xxxs: 0;
--breakpoint-xxs: 320px;
--breakpoint-xs: 568px;
--breakpoint-sm: 667px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--breakpoint-xxl: 1440px;
--breakpoint-xxxl: 1600px;

我想得到这样的东西:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
	<div class="row">
		<div class="col col-xxxs-1 col-xxs-2 col-xs-3 col-sm-4 col-md-5 col-lg-6 col-xl-7 col-xxl-8 col-xxxl-9">
			<div style="height:100vh;background:purple">text</div>
		</div><!--col-->
	</div><!--.row-->
</div><!--.container-->

我找到了手册,我正在尝试这个:

$grid-breakpoints: (
  xxxs: 0,
  xxs: 320px,
  xs: 568px,
  sm: 667px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1440px,
  xxxl: 1600px
)  !default;

$container-max-widths: (
  xxxs: 0,
  xxs: 320px,
  xs: 568px,
  sm: 667px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1440px,
  xxxl: 1600px
) !default;

:root {
  --breakpoint-xxxs: 0;
  --breakpoint-xxs: 320px;
  --breakpoint-xs: 568px;
  --breakpoint-sm: 667px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-xxl: 1440px;
  --breakpoint-xxxl: 1600px;
}

但它不会产生结果,并产生错误:

非法嵌套:没有任何东西可以嵌套在变量声明下面.

Codepen mcve.

我做错了什么？
预先感谢您的帮助.

---

UPD:如果那是不可能的......还有其他选择吗？我可以轻松编辑我的代码以使用我的断点模拟引导网格吗？

---

UPD2:由于@ aer0,我修复了错误:

$grid-breakpoints: (xxxs: 0, xxs: 320px, xs: 568px, sm: 667px, md: 768px, lg: 992px, xl: 1200px, xxl: 1440px, xxxl: 1600px)!default

$container-max-widths: (xxxs: 0, xxs: 320px, xs: 568px, sm: 667px, md: 768px, lg: 992px, xl: 1200px, xxl: 1440px, xxxl: 1600px)!default

\:root
  --breakpoint-xxxs: 0
  --breakpoint-xxs: 320px
  --breakpoint-xs: 568px
  --breakpoint-sm: 667px
  --breakpoint-md: 768px
  --breakpoint-lg: 992px
  --breakpoint-xl: 1200px
  --breakpoint-xxl: 1440px
  --breakpoint-xxxl: 1600px

但它并没有解决我的问题.

Answer 1

它不能完全来自CDN.要使用SASS 正确定制/覆盖,您需要@import中的必要的Bootstrap scss文件custom.scss.要覆盖网格断点,至少需要functions和variables.然后根据需要设置变量,最后设置@import bootstrap.请注意默认情况!已被删除,如文档中所述,是正确的自定义方法.

/* import what we need to override */
@import "bootstrap/functions";
@import "bootstrap/variables";

/* set the overriding variables */
$grid-breakpoints: (
  xxxs: 0,
  xxs: 320px,
  xs: 568px,
  sm: 667px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1440px,
  xxxl: 1600px
);
$container-max-widths: (
  xxxs: 0,
  xxs: 320px,
  xs: 568px,
  sm: 667px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1440px,
  xxxl: 1600px
);

/* override the !default vars with the values we set above */
@import "bootstrap";

使用这种方法,我们添加了新的网格断点,并确保这些新的断点在Bootstrap中无处不在,包括网格,用于间距,显示,弹性框,对齐,定位等的响应实用程序 ......

https://www.codeply.com/go/BIgmm1XGc2

另请参阅:
如何使用SASS Twitter Bootstrap 扩展/修改(自定义)Bootstrap 4
:为xxs断点添加媒体查询

Answer 2

我很惊讶没有开发人员能够回答我的问题！即使在github上也没有人敢去想它！

其实一切都变得很简单！

是的，使用 CDN 我们得到编译后的css文件。引导程序中的样式是使用 sass 编写的。此外，样式是书面分离和模块化的。所以这意味着我不需要将整个引导程序加载到我的服务器上。我想提供 Bootstrap 编译的 CSS 的缓存版本，我只需要添加我的断点。幸运的是，有一个特定的引导文件负责网格。它是bootstrap-grid.scss：

/*!
 * Bootstrap Grid v4.0.0 (https://getbootstrap.com)
 * Copyright 2011-2018 The Bootstrap Authors
 * Copyright 2011-2018 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

@at-root {
  @-ms-viewport { width: device-width; } // stylelint-disable-line at-rule-no-vendor-prefix
}

html {
  box-sizing: border-box;
  -ms-overflow-style: scrollbar;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

@import "functions";
@import "variables";

@import "mixins/breakpoints";
@import "mixins/grid-framework";
@import "mixins/grid";

@import "grid";
@import "utilities/display";
@import "utilities/flex";

现在我只需要从上面添加断点的文件中依次添加代码。不需要添加非网格代码。例如，负责颜色的代码。这是我在 codepen 上的 mcve。