Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Indented Sass syntax not working with node-sass and gulp-sass

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

like image 221
jsheffers Avatar asked Jun 24 '14 22:06

jsheffers


People also ask

Does gulp-Sass use node sass?

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.

How do I run a gulp command in sass?

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.

What are the two types of Sass syntax?

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 .

Is node Sass same as sass?

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.


1 Answers

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

like image 62
jsheffers Avatar answered Oct 04 '22 09:10

jsheffers