如何解决@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) {}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。