Output filename with error

[scriby]

When I run gulp-sass, it does not include the file name of the file that failed compilation:

[gulp] Error in plugin 'gulp-sass': source string:1: error: invalid top-level expression

How can I tell which file that error occurred in?

Here is my gulp task:

var sass = require('gulp-sass');
  gulp.src('./**/!(_)*.scss')
  .pipe(sass({ outputStyle: 'compressed' }))
  .pipe(gulp.dest('.'));

[yantakus]

Use errLogToConsole: true option for this purpose.

[juanpasolano]

I am having the same issue this is my gulp task

gulp.task('sass', function () {
  gulp.src('./stylesheets/sass/main.sass')
    .pipe(plumber({
      errorHandler: onError
    }))
    .pipe(sass({
        errLogToConsole: true
    }))
    .pipe(gulp.dest('./stylesheets/css/'));
});

How could I fix this?

[yantakus]

@juanpasolano You can use just

.pipe(sass({
        errLogToConsole: true
    }))

Plumber is not necessary.

[juanpasolano]

Thanks... I removed plumber but the error persists.

I must say I am using node-bourbon and node-neat. Maybe that is the problem??

gulp.task('sass', function () {
  gulp.src('./stylesheets/sass/main.sass')
    .pipe(sass({
        errLogToConsole: true,
        //outputStyle: 'compressed',
        includePaths: require('node-neat').includePaths
    }))
    .pipe(gulp.dest('./stylesheets/css/'))
    .pipe(rename('main.min.css'))
    .pipe(cssshrink())
    .pipe(gulp.dest('./stylesheets/css/'));
});

Also I dont know if I should open other issue for this... since the creator of the issue is using scss and i am using sass syntax.

[nateritter]

Getting a similar error. No clue what's wrong. My apologies for the newb question, but can't seem to find any documentation to help debug.

$ gulp css
[12:14:56] Using gulpfile ~/Sites/eg.dev/Gulpfile.js
[12:14:56] Starting 'css'...
[12:14:56] Finished 'css' after 11 ms
[12:14:56] [gulp-sass] source string:1: error: invalid top-level expression

Gulpfile.js is as follows:

var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');

gulp.task('css', function() {
    gulp.src('app/assets/sass/main.sass')
        .pipe(sass({errLogToConsole: true}))
        .pipe(gulp.dest('public/css'));
});

[nateritter]

Apologies. Figured out I was using the wrong syntax and file naming convention. File name should have been main.scss not main.sass and the syntax of that file should have been traditional CSS.

[nene]

I too ran into this error.

The issue seems to only effect the top-level source files you're passing directly to sass. When error happens in a file that's pulled in by @import, its file name is reported correctly, but otherwise the file name is reported as source string.

So it's not much of a problem when you have just one main.scss that @imports everything else, but if you have multiple top-level files it's an annoyance.

[amercier]

+1 I'm having the same issue. This makes debugging extremely painful on top-level files.

[codeThaGlobe]

I got this error from a syntax mistake. It had a line number at the end.

[Rowno]

👍, errLogToConsole: true should output a filename for top level source file errors.

[unionx]

Same error here. It's the extension name that caused the problem.

So if you want to compile sass files, you can use this one:

https://www.npmjs.com/package/gulp-ruby-sass

[brettwise]

I received this error.

[gulp-sass] invalid top-level expression on line 1 in /src/sass/vendor/foundation/scss/foundation.scss

Seems to related to gulp-sass choking on this:

@charset "UTF-8";

Once I commented it out all was well.

[Snugug]

This has been resolved in 2.x. Please try it and report back. If we don't hear back, we'll assume it's been resolved and close this issue.

npm install dlmanning/gulp-sass#2.x

[Snugug]

As it's been a month, I'm closing this.

[num13ru]

The same problem under windows 8.1 x64

Error: ←[4msrc\style\main.scss←[24m
←[90m  129:2←[39m  invalid top-level expression

gulp-sass: 2.0.0-alpha.1
node-sass: 3.0.0-beta.7
libsass: 3.2.0-beta.6
Windows 8.1

main.scss

$small: 320px;
$large: 1024px;

@mixin respond-to($media) {
  @if $media == handhelds {
    @media only screen and (max-width: $small) { @content; }
  }
  @else if $media == medium-screens {
    @media only screen and (min-width: $small + 1) and (max-width: $large - 1) { @content; }
  }
  @else if $media == wide-screens {
    @media only screen and (min-width: $large) { @content; }
  }
}

header {
  @include respond-to(handhelds) {
    background-color: red;
  }
  @include respond-to(medium-screens) {
    background-color: blue;
  }
  @include respond-to(wide-screens) {
    background-color: green;
  }
}​