Как создать новые контрольные точки в бутстрапе 4 с использованием CDN?

Я использую BootstrapCDN. Другие стили написаны в сасси и построены по глотку. Мне нужно создать свои собственные прорывы. Можно ли их создать, если я использую 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="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css'; return false;" 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-->

Ответ 1

Я очень удивлен, что ни один разработчик не смог ответить на мой вопрос! Даже на github никто не смел думать об этом!

На самом деле все оказалось очень просто!

Да, используя CDN, мы получаем скомпилированный файл css. Стили в начальной загрузке написаны с использованием sass. Более того, стили написаны разделительно-модульно. Таким образом, это означает, что мне не нужно загружать весь начальный загрузчик на мой сервер. Я хочу предоставить кешированную версию скомпилированного Bootstraps CSS, и мне нужно только добавить свои точки останова. К счастью, существует специальный файл начальной загрузки, который отвечает за Grid. Это 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";

Теперь мне просто нужно последовательно добавить код из файлов выше, добавляя мои точки останова. Добавить не Grid-код не обязательно. Например, код отвечает за цвет. Вот мой mcve на codepen.

Ответ 2

Это не может быть сделано полностью из CDN. Чтобы правильно настроить/переопределить с помощью SASS, вам необходимо @import необходимых файлов Bootstrap scss в custom.scss. Чтобы переопределить точки прерывания сетки, как минимум, вам нужны functions и variables. Затем установите необходимые переменные и, наконец, загрузите @import. Обратите внимание, как по умолчанию! был удален, как объяснено в документации, как правильный метод настройки.

/* 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, включая сетку , отзывчивые утилиты для разметки, отображения, flexbox, выравнивания, позиционирования и т.д....

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

Также смотрите:
Как расширить/изменить (настроить) Bootstrap 4 с помощью SASS
Twitter Bootstrap: добавьте медиа-запросы для точки останова xxs

Ответ 3

По словам Гитхуба, похоже, вы столкнулись с "ошибкой" здесь. См. Здесь: https://github.com/sass/sass/issues/1166

При этом вам нужно будет написать определение переменной в одной строке точно так же.

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