djangosassgulpzurb-foundationgulp-ruby-sass

Compiling Foundation 6 with Gulp and gulp-ruby-sass


I'm learning Django, Foundation, Gulp, and SASS all at once. It's been tons of fun so far, but I've hit a brick wall now. I'm trying to compile Foundation 6 with Gulp.

Foundation's documentation gives an example of how to do this with Grunt, but otherwise only describes what needs to happen: http://foundation.zurb.com/sites/docs/sass.html#compiling-manually

The task I've written below has been based on what I see here: https://www.npmjs.com/package/gulp-ruby-sass/

Here is my current gulpfile.js:

const gulp = require('gulp');
const sass = require('gulp-ruby-sass');
const autoprefixer = require('gulp-autoprefixer');

autoprefixer({ browsers: ['last 2 version', 'ie >= 9', 'and_chr >= 2.3'] });

gulp.task('default', function() {

});

gulp.task('compile-foundation', function() {
  sass('scss/*.scss', sass, {
    loadPath: [ 'node_modules/foundation-sites/scss' ]
    })
    .on('error', sass.logError)
    .pipe(gulp.dest('css'))
});

Here's what output I'm getting when I run gulp compile-foundation:

[20:20:35] Using gulpfile ~/learnlojbandotcom/learnlojbandotcom/gulpfile.js
[20:20:35] Starting 'compile-foundation'...
[20:20:35] Finished 'compile-foundation' after 22 ms
[20:20:35] error scss/_settings.scss (Line 44: File to import not found or unreadable: util/util.)

Here's my directory structure:

djangosandbox/
  djangoapp/
    # django application files
  djangoproject/
    css/
    gulpfile.js
    html/ # Template files will go in here.
    __init__.py
    node_modules/
      autoprefixer/
      foundation-sites/
      gulp/
      # and many more...
    __pycache__/
    scss/
      _settings.scss
      styles.scss # Imports _settings.scss
    settings.py
    urls.py
    wsgi.py

Solution

  • Found it. The trouble was the second argument ("sass") passed to the sass function in the Gulp task:

    sass('scss/*.scss', sass, {
    #this is the bugger ^^^^
    

    I don't know what I was thinking when I put it there. Removing it solved the problem.