foundation6 does not build with node-sass

Question

i am upgrading foundation5 to foundation6 and when compiling the code with node-sass i get the following error

{ [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' }

i am running the latest node-sass and gulp-sass in my node dev dependancies:

• "gulp-sass": "~2.1.1",
• "should": "^7.1.0",
• "node-sass": "~3.4.2"

googling on the error returns http://foundation.zurb.com/forum/posts/36717-global-margin-undefined-only-for-buttons

$global-width is defined in bower_components/foundation-sites/scss/_global.scss

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

any advice much appreciated.

Answer 1

Make sure you are importing everything you need and in the correct order. Your app.scss file should look something like this:

@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

my bad, i did not import into my _settings.scss the foundations

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