如何在 SASS 中使用 Bootstrap 4 媒体断点？

Question

在官方引导程序网站上，它说：

由于我们在 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";