Menu icon Foundation
Sass defaulting to original with custom gulpfile.js

I have no way of knowing whether this is an issue with the gulpfile.js or not. But it's the one thing I'm doing that's slightly outside the norm. Allow me to explain:

I'm building a WordPress theme that leverages Foundation 6 for it's layout. This is the second generation of the theme, as the first used 5. I've used the 5 version to build about 50 or 60 sites in the last six months, so I know it's working well. However, now that I'm migrating to the new regiem, I'm wanting to solve one major problem of working with Foundation as a child theme, which is that I need to keep all my SCSS files out of the directory into which I'm installing foundation, ./vendor/foundation. Here is what my gulpfile is doing:

var gulp = require('gulp');
var $    = require('gulp-load-plugins')();

var sassPaths = [
  'bower_components/foundation-sites/scss',
  'bower_components/motion-ui/src',
  '../../lib/scss'
];

gulp.task('sass', function() {
  return gulp.src('../../lib/scss/app.scss')
    .pipe($.sass({
      includePaths: sassPaths
    })
      .on('error', $.sass.logError))
    .pipe($.autoprefixer({
      browsers: ['last 2 versions', 'ie >= 9']
    }))
    .pipe(gulp.dest('../../inc/css'));
});

gulp.task('default', ['sass'], function() {
  gulp.watch(['../../lib/scss/**/*.scss'], ['sass']);
});

As you can see, I've removed any reference to the normal location for SCSS files and replaced it with my preferred location.

The problem is that as I'm working with the SCSS, it suddenly decided to act as though the @include foundation-flex-classes; is not uncommented and none of the styles included in app.scss are being honored. To be clear: it worked for a while. But now I'm back to square one with no idea what's wrong or why gulp isn't looking in the correct directories.

Can someone help? Appreciate it.

gulpfile.jsconfiguration

I have no way of knowing whether this is an issue with the gulpfile.js or not. But it's the one thing I'm doing that's slightly outside the norm. Allow me to explain:

I'm building a WordPress theme that leverages Foundation 6 for it's layout. This is the second generation of the theme, as the first used 5. I've used the 5 version to build about 50 or 60 sites in the last six months, so I know it's working well. However, now that I'm migrating to the new regiem, I'm wanting to solve one major problem of working with Foundation as a child theme, which is that I need to keep all my SCSS files out of the directory into which I'm installing foundation, ./vendor/foundation. Here is what my gulpfile is doing:

var gulp = require('gulp');
var $    = require('gulp-load-plugins')();

var sassPaths = [
  'bower_components/foundation-sites/scss',
  'bower_components/motion-ui/src',
  '../../lib/scss'
];

gulp.task('sass', function() {
  return gulp.src('../../lib/scss/app.scss')
    .pipe($.sass({
      includePaths: sassPaths
    })
      .on('error', $.sass.logError))
    .pipe($.autoprefixer({
      browsers: ['last 2 versions', 'ie >= 9']
    }))
    .pipe(gulp.dest('../../inc/css'));
});

gulp.task('default', ['sass'], function() {
  gulp.watch(['../../lib/scss/**/*.scss'], ['sass']);
});

As you can see, I've removed any reference to the normal location for SCSS files and replaced it with my preferred location.

The problem is that as I'm working with the SCSS, it suddenly decided to act as though the @include foundation-flex-classes; is not uncommented and none of the styles included in app.scss are being honored. To be clear: it worked for a while. But now I'm back to square one with no idea what's wrong or why gulp isn't looking in the correct directories.

Can someone help? Appreciate it.

Tom Belknap over 3 years ago

Ok. Additional details - though I do not understand a thing about them:

For reasons I cannot explain, the SCSS files suddenly got compiled correctly right after typing up this post. Then I added the following to the app.scss file and it went right back where it was:

div.hero-well {
	background-image: url(/wp-content/uploads/sites/67/2016/03/hero.png);
	background-size: cover;
	background-position: center;
	padding: 0 50px; <-- NEW
}

My markup looks like this:

<?php /* Hero */ ?>
<div class="row align-center hero-well">
	<div class="columns large-8">
		<?php echo wp_get_attachment_image( 32, 'full' ); ?>
	</div>
</div>

What is going on??

Tom Belknap over 3 years ago

... and now it's back. Didn't change a thing, just started and stopped Foundation. What??

Rafi Benkual over 3 years ago

So you re-started the server and it is compiling? It's possible that changes to the Gulpfile require re-running Gulp to take.

Tom Belknap over 3 years ago

Well no, actually. What seems to be happening:

  1. Run foundation
  2. Styles are now being honored
  3. Make a change to the app.scss file
  4. Styles are now NOT being honored
  5. Shut down foundation
  6. Restart foundation
  7. Styles are once again being honored.

And when I say "styles," that's actually a limited subset as well. The padding I'm trying to introduce is not being honored. Only the fact that Foundation is loading the flexbox classes and using the _settings.scss files correctly.

Here is the result when things are working:

Foundation is working. But not honoring the padding I

 

Here's when it's not:

Ouch.

Rafi Benkual over 3 years ago

Is there a reason you are making changes in the app.scss file? Creating partials in the components folder is the recommended way.

 

Having said that, I'm able to make changes in the app.scss file on the fly. I wonder if it has to do with the changes you have in the Gulpfile.

Rafi Benkual over 3 years ago

Around line 70 of the Gulpfile you should have 

 

// Compile Sass into CSS
// In production, the CSS is compressed
gulp.task('sass', function() {
  var uncss = $.if(isProduction, $.uncss({
    html: ['src/**/*.html'],
    ignore: [
      new RegExp('^meta\..*'),
      new RegExp('^\.is-.*')
    ]
  }));

  return gulp.src('./src/assets/scss/app.scss')
    .pipe($.sass({
      includePaths: paths.sass,

Tom Belknap over 3 years ago

Ok,

  1. Where in the documentation does it say anything about a "components directory?"
  2. There is no components directory
  3. If I create a brand new Foundation project for Sites, I see no such entries in that gulpfile.
  4. What would the above code, when added to the gulpfile.js, solve about my current issue?

 

Tom Belknap over 3 years ago

On further inspection, there just seems to be something profoundly flakey about the way the Sass compiler is working. Make a change, it defauts. Add a few spaces at the bottom of the Sass file (or take some away) and resave, it's back in action.

 

Tom Belknap over 3 years ago

Thanks for the attempts, Rafi. But this appears to be a consistent problem with Foundation 6:

http://foundation.zurb.com/forum/posts/37692-foundation-6-gulp-deletes-css-file-when-compiling-scss