时间戳

首页 > 解决方案 > 将 @include 与 scss 一起使用时出错

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

问题描述

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

错误信息：

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

小路：homepage.scss

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

标签： sassbootstrap-4

解决方案

你可以@import整个“引导”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

另请参阅：如何使用 SASS 扩展/修改（自定义）Bootstrap 4

推荐阅读