@include 断点在基础框架中显示为未定义的 mixin

问题描述

我使用的是 ngx-foundation 1.0.8 版。并按照 ZURB 讲师在视频 foundation tutorial

的 15:00 进行演示

讲师使用了断点mixin。但是当我尝试代码时。 sass 编译器报错

    Module build Failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined mixin.
  ╷
3 │ ┌   @include breakpoint(medium) {
4 │ │     height: 60rem;
5 │ └   }

我尝试检查设置和文档，但无法找到如何启用断点混合。

这是我的styles.scss文件

// Global Variable Overrides
@import "./assets/scss/settings";

// Import Foundation for Sites
@import "~foundation-sites/scss/foundation";

// ---- Global styles ----
@include foundation-global-styles;
@include foundation-forms;
@include foundation-typography;

// ---- Grids (choose one) ----
@include foundation-xy-grid-classes;
// @include foundation-grid;
// @include foundation-flex-grid;

// Comment out the Foundation Components that you're not using!!!!!!!!!!!!!!!!!!!

// ---- Generic components ----
@include foundation-button;
@include foundation-button-group;
@include foundation-close-button;
@include foundation-label;
@include foundation-progress-bar;
@include foundation-slider;
@include foundation-switch;
@include foundation-table;

// ---- Basic components ----
@include foundation-badge;
@include foundation-breadcrumbs;
@include foundation-callout;
@include foundation-card;
@include foundation-dropdown;
@include foundation-pagination;
@include foundation-tooltip;

// ---- Containers ----
@include foundation-accordion;
@include foundation-media-object;
@include foundation-orbit;
@include foundation-responsive-embed;
@include foundation-tabs;
@include foundation-thumbnail;

// ---- Menu-based containers ----
@include foundation-menu;
@include foundation-menu-icon;
@include foundation-accordion-menu;
@include foundation-drilldown-menu;
@include foundation-dropdown-menu;

// ---- Layout components ----
@include foundation-off-canvas;
@include foundation-reveal;
@include foundation-sticky;
@include foundation-title-bar;
@include foundation-top-bar;

// ---- Helpers ----
@include foundation-float-classes;
@include foundation-flex-classes;
@include foundation-visibility-classes;
// @include foundation-prototype-classes;

// Motion UI Sass Library
@import "~motion-ui/src/motion-ui";
@include motion-ui-transitions;
@include motion-ui-animations;

// Import Angular ngx-foundation Framework Added Styles
@import "~ngx-foundation/assets/scss/main";

// Global Overrides & Added Styles
@import "./assets/scss/global";

解决方法

我解决了这个问题，因为我也必须在组件 scss 文件中导入 settings.scss 文件。

@import "/src/assets/scss/settings";
.box-height-style {
  height: 80rem;
  @include breakpoint(medium) {
    height: 60rem;
  }
}

或者我们可以使用@import或新的scss语法@use

//on using @use the classes has to be used with namespace
@use "/src/assets/scss/settings";
.box-height-style {
  height: 80rem;
  @include settings.breakpoint(medium) { 
    height: 60rem;
  }
}

settings.scss 是 ngx-foundation 定义所有变量的文件。

还有一种后备方法可以获得与 foundation-docs 相同的结果

// /* Small only */
// @media screen and (max-width: 39.9375em) {}

// /* Medium and up */
// @media screen and (min-width: 40em) {}

// /* Medium only */
// @media screen and (min-width: 40em) and (max-width: 63.9375em) {}

// /* Large and up */
// @media screen and (min-width: 64em) {}

// /* Large only */
// @media screen and (min-width: 64em) and (max-width: 74.9375em) {}