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
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.