Libsass 2.0 brought the indented syntax to libsass users, but so far I've been unable to make it work with node-sass
and gulp-sass
. I have all of the latest versions:
node-sass: 0.93
gulp-sass: 0.7.2
gulp: 3.8.2
This setup compiles .scss
files and even .sass
files using the bracket syntax but it will not compile the indented syntax. Has anyone successfully compiled the indented syntax with node-sass and gulp?
My gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function() {
return gulp.src('./sites/all/themes/nsfvb/sass/screen.sass')
.pipe(sass({
includePaths: require('node-neat').includePaths,
errLogToConsole: true
}
))
.pipe(gulp.dest('./sites/all/themes/nsfvb/css'));
});
gulp.task('watch', function() {
gulp.watch('./sites/all/themes/nsfvb/sass/*.sass', ['sass']);
});
gulp.task('default', ['sass', 'watch']);
Error when running the default task
error: invalid top-level expression
Updated answer:
If you want to use the indented syntax (.sass) as the top level file, use sass({indentedSyntax: true}).
sass({indentedSyntax: true})
Outdated answer
Answer found here: https://github.com/dlmanning/gulp-sass/issues/55#issuecomment-50882250
With default settings compiling sass files doesn't work. However there is a workaround. If you pass sourceComments: 'normal' as parameter the compilation work. The reason for this is that there is a strange condition which change how file are handled: https://github.com/dlmanning/gulp-sass/blob/master/index.js#L23-L27
Code example found here: https://github.com/chrisdl/gulp-libsass-example/blob/master/gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
// Run with "> gulp sass" in terminal.
gulp.task('sass', function () {
gulp.src('./sass/main.sass')
.pipe(sass({sourceComments: 'normal'}))
.pipe(gulp.dest('./css'));
});
Notice
If you run into issues using this snippet take a look at the following quote and issue.
Using this workaround will result in any changes to the file content from earlier in the gulp pipeline (e.g. earlier plugins) being discarded - JMM
https://github.com/dlmanning/gulp-sass/issues/158
Just to update this answer, the documentation for gulp-sass now says:
If you want to use the indented syntax (.sass) as the top level file, use sass({indentedSyntax: true})
.