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
gulp-sass supports both Dart Sass and Node Sass, although Node Sass is deprecated. We recommend that you use Dart Sass for new projects, and migrate Node Sass projects to Dart Sass when possible.
Setting up a task Still using the command line, you can install Gulp-sass by running npm install gulp-sass --save-dev . After that, require Gulp-sass in your gulpfile. js. Put var sass = require('gulp-sass'); under the line you required gulp.
SASS supports two syntaxes namely SCSS and Indented syntax. The SCSS (Sassy CSS) is an extension of CSS syntax. This means every valid CSS is a valid SCSS as well. SCSS makes much easier to maintain large stylesheets and can recognize vendor specific syntax, Many CSS and SCSS files use the extension .
Node-sass is a library that provides binding for Node. js to LibSass, the C version of the popular stylesheet preprocessor, Sass. It allows you to natively compile . scss files to css at incredible speed and automatically via a connect middleware.
If you want to use the indented syntax (.sass) as the top level file, use sass({indentedSyntax: true}).
sass({indentedSyntax: true})
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'));
});
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With