将 @include 与 scss 一起使用时出错

【问题标题】：Error using @include with scss将 @include 与 scss 一起使用时出错
【发布时间】：2021-04-20 21:57:47
【问题描述】：

如何让媒体查询在引导程序中工作？我有一个 SCSS 文件，我想我需要导入一些东西，但我不知道是什么。

错误信息：

Scss compiler error: Error: no mixin named media-breakpoint-up

路径：homepage.scss

@include media-breakpoint-up(sm) {
  h1.home-page {
    font-size: 3rem;
  }
}

【问题讨论】：

您使用的是引导程序的编译版本（.css）吗？

标签： sass bootstrap-4

【解决方案1】：

你可以@import整个“bootstrap”scss，然后定义自定义的@include...

@import "bootstrap";

@include media-breakpoint-up(sm) {
  h1.home-page {
    font-size: 3rem;
  }
}

或者，您可以导入函数、变量和 mixin（因为这仅包括 mixin 所需的内容）...

@import "bootstrap/functions";
@import "bootstrap/variables";
@import "bootstrap/mixins";

/* change col style on sm only */
@include media-breakpoint-up(sm) {
  h1.home-page {
    font-size: 3rem;
  }
}

@import "bootstrap";

这完全取决于您还有哪些其他自定义设置。

https://codeply.com/go/3zTbKtczVd

另见：How to extend/modify (customize) Bootstrap 4 with SASS

【讨论】：