Sass functions with the Foundation theme

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

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.

Hi Kim,

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

All the best,
John

1 Like

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