如何在 SASS 中使用 Bootstrap 4 媒体断点？ [复制]

Question

在官方bootstrap website 上写着：

由于我们在 Sass 中编写源 CSS，我们所有的媒体查询都是 可通过 Sass mixins 获得：

@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// Example usage:
@include media-breakpoint-up(sm) {
  .some-class {
    display: block;
  }
}

现在，我将 SASS 用于我的 CSS，并且我也在使用 Bootstrap，但我只是通过将它们包含在 HTML 中来将两者结合起来。

当我尝试在我的 SASS 文件中做这样的事情时：

@include media-breakpoint-up(xl) { ... }

我收到一个错误：

未定义的混音

我猜这是因为我的 SASS 文件不知道 Bootstrap，因为我只在 HTML 中包含了 Bootstrap。

如何将 Bootstrap 4 作为部分文件包含到我的 SASS 文件中？ （我想这是我必须要做的……）

PS：我使用的是 Bootstrap 4，我更喜欢不需要 Bower 或 RubyGems 等的解决方案，而只是下载 Bootstrap 文件并以老式方式将其包含到我的 SASS 中 - 如果可以的话全部？

Answer 1

下载整个源代码，并查看 scss/mixins。 _breakpoints.scss 文件是您应该拥有的文件。我做同样的事情，我下载源代码并将我需要的东西包含在我自己编译的 css 中。

@import "_variables";
@import "_mixins";
@import "_grid";