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：

＆＃34; gulp-sass＆＃34;：＆＃34; ~2.1.1＆＃34;，
＆＃34;应该＆＃34;：＆＃34; ^ 7.1.0＆＃34;，
＆＃34; node-sass＆＃34;：＆＃34; ~3.4.2＆＃34;

google搜索错误返回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";

foundation6不使用node-sass构建

2 个答案: