@include breakpoints are shown as undefined mixin in foundation framework

Question

i am using ngx-foundation version 1.0.8. and following as being demonstrated by instructor of ZURB at 15:00 of the video foundation tutorial

the instructor used a breakpoint mixin. but when i tried the code. sass compiler gave error

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

i tried checking the settings and docs but wasn't able to find how to enable the breakpoint mixin.

here is my styles.scss file

// 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";

Answer 1

i solved this issue as i had to import the settings.scss file too in the component scss file.

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

or either we can use @import or new scss syntax @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 is the file where all the variables are defined by ngx-foundation.

there is also one fallback method of obtaining the same result as taken from 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) {}