Sass functions with the Foundation theme

[johndmc]

Hello all,

I’m having difficulties using the Sass functions with the Foundation theme.

Running npm start, the first issue was this error message:

gulp-sass 5 does not have a default Sass compiler; please set one yourself.
Both the `sass` and `node-sass` packages are permitted.

Adding the following line to gulpfile.js (taken from a forum post on the Papers theme) seemed to
resolve this:
var sass = require('gulp-sass')(require('sass'));

However, I now get a different error:

$ npm start

 > foundation-s-theme@1.2.1 start
 > gulp

[15:04:46] Using gulpfile ~/Documents/Omeka/Themes/foundation/gulpfile.js
[15:04:46] Starting 'default'...
[15:04:46] Starting 'sass'...
[15:04:46] The following tasks did not complete: default, sass
[15:04:46] Did you forget to signal async completion?

I’m not too familiar with Node, Gulp, Sass et al, so forgive me if there’s an obvious error!

Best wishes,
John

[kim]

Hi John.

Thanks for your patience while we looked into the fix for this. The latest release with improved sass tasks is now available on omeka.org. As a heads up, the latest version of sass has made compiling foundation’s provided styles noticeably slower. This is out of our control, and I wanted to give a heads up that this is expected behavior.

[johndmc]

Hi Kim,

That excellent! Many thanks for taking the time to look at this, it’s greatly appreciated.

All the best,
John

[Jovi]

I noticed this is strangely not fixed for Foundation in Omeka Classic.

In case some poor classic user finds this post and wonders, you can replace “gulpfile.js” with this code below. I simply replaced the corresponding paths with the paths for the Omeka Classic version:

///start code

‘use strict’;

var gulp = require(‘gulp’);

gulp.task(‘css’, function () {
var sass = require(‘gulp-sass’)(require(‘sass’));
var postcss = require(‘gulp-postcss’);
var autoprefixer = require(‘autoprefixer’);

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

return gulp.src('scss/*.scss')
    .pipe(sass.sync({
        outputStyle: 'compressed',
        includePaths: sassPaths
    }).on('error', sass.logError))
    .pipe(postcss([
        autoprefixer()
    ]))
    .pipe(gulp.dest('css'))

});

gulp.task(‘css:watch’, function () {
gulp.watch(“scss/*.scss”, gulp.parallel(‘css’));
});

gulp.task(‘default’, gulp.series(‘css:watch’));

///end code