Foundation6 不使用 node-sass 构建

Question

我正在将foundation5升级到foundation6，使用node-sass编译代码时出现以下错误

{ [Error: bower_components/foundation-sites/scss/grid/_grid.scss
Error: Undefined variable: "$global-width".
        on line 11 of bower_components/foundation-sites/scss/grid/_grid.scss
>> $grid-row-width: $global-width !default;
   -----------------^
]
  formatted: 'Error: Undefined variable: "$global-width".\n        on line 11 of bower_components/foundation-sites/scss/grid/_grid.scss\n>> $grid-row-width: $global-width !default;\n   -----------------^\n',
  message: 'bower_components/foundation-sites/scss/grid/_grid.scss\nError: Undefined variable: "$global-width".\n        on line 11 of bower_components/foundation-sites/scss/grid/_grid.scss\n>> $grid-row-width: $global-width !default;\n   -----------------^\n',
  column: 18,
  line: 11,
  file: '/home/khine/Sandboxes/node-blade-boiler-template/bower_components/foundation-sites/scss/grid/_grid.scss',
  status: 1,
  messageFormatted: '\u001b[4mbower_components/foundation-sites/scss/grid/_grid.scss\u001b[24m\nError: Undefined variable: "$global-width".\n        on line 11 of bower_components/foundation-sites/scss/grid/_grid.scss\n>> $grid-row-width: $global-width !default;\n   -----------------^\n',
  name: 'Error',
  stack: 'Error: bower_components/foundation-sites/scss/grid/_grid.scss\nError: Undefined variable: "$global-width".\n        on line 11 of bower_components/foundation-sites/scss/grid/_grid.scss\n>> $grid-row-width: $global-width !default;\n   -----------------^\n\n  at options.error (/home/khine/Sandboxes/node-blade-boiler-template/node_modules/gulp-sass/node_modules/node-sass/lib/index.js:277:32)\n',
  showStack: false,
  showProperties: true,
  plugin: 'gulp-sass' }

我正在我的节点开发依赖项中运行最新的 node-sass 和 gulp-sass：

• "gulp-sass": "~2.1.1",
• “应该”：“^7.1.0”，
• “node-sass”：“~3.4.2”

谷歌搜索错误返回http://foundation.zurb.com/forum/posts/36717-global-margin-undefined-only-for-buttons

$global-width 定义在bower_components/foundation-sites/scss/_global.scss

$global-width: rem-calc(1200) !default;

非常感谢任何建议。

Answer 1

确保您以正确的顺序导入所需的所有内容。您的 app.scss 文件应如下所示：

@charset 'utf-8';

@import 'settings';
@import 'foundation';
@import 'motion-ui';

@include foundation-global-styles;

// Everything from here down can be commented out to include only the components you use.
@include foundation-grid;
@include foundation-typography;
@include foundation-button;
@include foundation-forms;
@include foundation-visibility-classes;
@include foundation-float-classes;
@include foundation-accordion;
@include foundation-badge;
@include foundation-breadcrumbs;
@include foundation-button-group;
@include foundation-callout;
@include foundation-close-button;
@include foundation-drilldown-menu;
@include foundation-dropdown;
@include foundation-dropdown-menu;
@include foundation-flex-video;
@include foundation-label;
@include foundation-media-object;
@include foundation-menu;
@include foundation-off-canvas;
@include foundation-orbit;
@include foundation-pagination;
@include foundation-progress-bar;
@include foundation-slider;
@include foundation-sticky;
@include foundation-reveal;
@include foundation-switch;
@include foundation-table;
@include foundation-tabs;
@include foundation-thumbnail;
@include foundation-title-bar;
@include foundation-tooltip;
@include foundation-top-bar;

@include motion-ui-transitions;
@include motion-ui-animations;

Answer 2

我的错，我没有将基础导入到我的 _settings.scss 中

@import "../../bower_components/foundation-sites/scss/foundation";