Menu icon Foundation
Foundation 6 Sass Starter Template Issue

I have been trying to customize the basic Sass template to setup a custom Gulp task that is based off the sass task. This task is supposed to go in and retrieve the theme file from the "themes" folder and put the compiled version into the css folder.

 

Sass

I have been trying to customize the basic Sass template to setup a custom Gulp task that is based off the sass task. This task is supposed to go in and retrieve the theme file from the "themes" folder and put the compiled version into the css folder.

 

Rafi Benkual 3 months ago

Not sure what the issue though because this image is too small to read. Can you upload a bigger one or add the error message?

Jennifer Tso 3 months ago

This is the code from the gulpfile:

var gulp = require('gulp');

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



var sassPaths = [

  'bower_components/normalize.scss/sass',

  'bower_components/foundation-sites/scss',

  'bower_components/motion-ui/src'

];



//var themePaths = ['css/themes'];



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

  return gulp.src('scss/app.scss')

    .pipe($.sass({

      includePaths: sassPaths,

      outputStyle: 'compressed' // if css compressed **file size**

    })

      .on('error', $.sass.logError))

    .pipe($.autoprefixer({

      browsers: ['last 2 versions', 'ie >= 9']

    }))

    .pipe(gulp.dest('css'));

});



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

  //console.log("themes");

  return gulp.src('themes/theme-*.scss')

    .pipe($.sass({

      includePaths: sassPaths,

      outputStyle: 'compressed' // if css compressed **file size**

    })

      .on('error', $.sass.logError))

    .pipe($.autoprefixer({

      browsers: ['last 2 versions', 'ie >= 9']

    }))

    .pipe(gulp.dest('css/themes/theme-*.css'));

});



gulp.task('default', ['sass', 'themes'], function() {

  gulp.watch(['scss/**/*.scss'], ['sass']);

  gulp.watch(['scss/**/*.scss'], ['themes']);

});

This image is a shot of the Club Assets directory folder with all the files from the SASS basic starter template: