Menu icon Foundation
Foundation 5 site breaking after gulp-sass update

A year ago I developed a site using gulp-sass 1.1.0 and Foundation 5. Everything was working fine. Today I needed to do some updates to the site, so I cloned the site back down on my computer, ran `npm install` only to see that `gulp-sass` was not compatible with my latest setup of npm and node. So I tried updating the `gulp-sass` package in my package.json to 2.3.1. `npm install` ran successfully, but now my site seems to be broken in terms of including the Foundation 5 files that's needed for the CSS framework. To me it looks like the files are found(tested this with a simple code I searched for in the concatinated stylesheet through the various .scss-files), but some of the classes and styles are being left out of the concatinated stylesheet. Specifically classes like all the `.column` and `.pull` classes are left out, which breaks the entire site.

I'm no gulp, sass or Foundation 5 expert, but I was wondering if anyone had any suggestion for what my choices are? Could Foundation 5 and gulp-sass 2.x simply not be working well together? When doing changes while watching the files gulp-sass is successfully executed with no errors. But the concatenated file is still not complete.

Here's my current package.json:

{
  "name": "gromf",
  "version": "0.0.2",
  "description": "Wordpress starter theme, based on Roots",
  "main": "gulpfile.js",
  "devDependencies": {
    "gulp": "~3.9.1",
    "gulp-autoprefixer": "~1.0.1",
    "gulp-concat": "~2.4.1",
    "gulp-imagemin": "~1.2.1",
    "gulp-jshint": "~1.8.6",
    "gulp-livereload": "~2.1.1",
    "gulp-minify-css": "~0.3.11",
    "gulp-util": "~3.0.1",
    "gulp-rename": "~1.2.0",
    "gulp-sass": "~2.3.1",
    "gulp-size": "~1.1.0",
    "gulp-svgmin": "~0.4.7",
    "gulp-uglify": "~1.0.1",
    "jshint-stylish": "~1.0.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/schikulski/gromf.git"
  },
  "author": "Simen Schikulski",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/schikulski/gromf/issues"
  },
  "homepage": "https://github.com/schikulski/gromf"
}

 

And the sass part of my gulp.js:

var sassPaths = [
	'assets/scss',
	'bower_components/foundation/scss/foundation'
];


	gulp.task('sass', function (){
		gulp.src([
			'bower_components/foundation/scss/normalize.scss',         // Gets normalize
			'assets/scss/app.scss'])                                   // Gets the apps scss
			.pipe(sass({outputStyle: 'compressed', includePaths: sassPaths}).on('error', sass.logError))
			.pipe(concat('main.css'))                                  // Concat all css
			.pipe(rename({suffix: '.min'}))                            // Rename it
			.pipe(minifycss())                                         // Minify the CSS
			.pipe(gulp.dest('assets/css/'))                            // Set the destination to assets/css
			.pipe(livereload())                                        // Reloads server
			util.log('Sass compiled & minified');                 // Output to notification
	});

app.scss includes foundation as follows:

@import "_settings";
@import "_foundation";

...

_foundation.scss:

@charset "UTF-8";

@import
  "components/grid",
  "components/accordion",
  "components/alert-boxes",

..and so on

Foundation 5gulp-sassSassgulpscss5

A year ago I developed a site using gulp-sass 1.1.0 and Foundation 5. Everything was working fine. Today I needed to do some updates to the site, so I cloned the site back down on my computer, ran `npm install` only to see that `gulp-sass` was not compatible with my latest setup of npm and node. So I tried updating the `gulp-sass` package in my package.json to 2.3.1. `npm install` ran successfully, but now my site seems to be broken in terms of including the Foundation 5 files that's needed for the CSS framework. To me it looks like the files are found(tested this with a simple code I searched for in the concatinated stylesheet through the various .scss-files), but some of the classes and styles are being left out of the concatinated stylesheet. Specifically classes like all the `.column` and `.pull` classes are left out, which breaks the entire site.

I'm no gulp, sass or Foundation 5 expert, but I was wondering if anyone had any suggestion for what my choices are? Could Foundation 5 and gulp-sass 2.x simply not be working well together? When doing changes while watching the files gulp-sass is successfully executed with no errors. But the concatenated file is still not complete.

Here's my current package.json:

{
  "name": "gromf",
  "version": "0.0.2",
  "description": "Wordpress starter theme, based on Roots",
  "main": "gulpfile.js",
  "devDependencies": {
    "gulp": "~3.9.1",
    "gulp-autoprefixer": "~1.0.1",
    "gulp-concat": "~2.4.1",
    "gulp-imagemin": "~1.2.1",
    "gulp-jshint": "~1.8.6",
    "gulp-livereload": "~2.1.1",
    "gulp-minify-css": "~0.3.11",
    "gulp-util": "~3.0.1",
    "gulp-rename": "~1.2.0",
    "gulp-sass": "~2.3.1",
    "gulp-size": "~1.1.0",
    "gulp-svgmin": "~0.4.7",
    "gulp-uglify": "~1.0.1",
    "jshint-stylish": "~1.0.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/schikulski/gromf.git"
  },
  "author": "Simen Schikulski",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/schikulski/gromf/issues"
  },
  "homepage": "https://github.com/schikulski/gromf"
}

 

And the sass part of my gulp.js:

var sassPaths = [
	'assets/scss',
	'bower_components/foundation/scss/foundation'
];


	gulp.task('sass', function (){
		gulp.src([
			'bower_components/foundation/scss/normalize.scss',         // Gets normalize
			'assets/scss/app.scss'])                                   // Gets the apps scss
			.pipe(sass({outputStyle: 'compressed', includePaths: sassPaths}).on('error', sass.logError))
			.pipe(concat('main.css'))                                  // Concat all css
			.pipe(rename({suffix: '.min'}))                            // Rename it
			.pipe(minifycss())                                         // Minify the CSS
			.pipe(gulp.dest('assets/css/'))                            // Set the destination to assets/css
			.pipe(livereload())                                        // Reloads server
			util.log('Sass compiled & minified');                 // Output to notification
	});

app.scss includes foundation as follows:

@import "_settings";
@import "_foundation";

...

_foundation.scss:

@charset "UTF-8";

@import
  "components/grid",
  "components/accordion",
  "components/alert-boxes",

..and so on