gulp-sass not compiling sass files

Question

I'm actually trying to build a gulp planning to do web related stuff, like compile sass, minify css, uglify javascript and so on. But I'm really having troubles with sass.

Here's a sample of my code :

gulp.task('compile-sass', function() {
    gulp.src(buildType+config.path.sass+"/main.sass")
        .pipe(compass({
            css: 'css',
            sass: 'sass'
        }))
    .pipe(gulp.dest(buildType+config.path.css+"/test"));
});

So I'm using compass here because i only have *.sass files and no .scss so gulp-sass wouldn't work for me. Therefore, I'm asking if anyone could give me a hint of why this task doesn't work. Here's what my console returns :

[gulp] Starting 'compile-sass'...
[gulp] Finished 'compile-sass' after 6.11 ms
[gulp] You must compile individual stylesheets from the project directory.


events.js:72
    throw er; // Unhandled 'error' event
          ^
[gulp] Error in plugin 'gulp-compass': Compass failed
at Transform.<anonymous> (/Users/myusername/node_modules/gulp-compass/index.js:37:28)
at ChildProcess.<anonymous> (/Users/myusername/node_modules/gulp-compass/lib/compass.js:136:7)
at ChildProcess.EventEmitter.emit (events.js:98:17)
at maybeClose (child_process.js:753:16)
at Socket.<anonymous> (child_process.js:966:11)
at Socket.EventEmitter.emit (events.js:95:17)
at Pipe.close (net.js:465:12)

I know I'm not using any config.rb, but two things : 1) I found no example of such files 2) gulp-compass doc gives example without such a file so I assume it's optional

Thanks in advance.

What are the values for `buildType+config.path.sass` and `buildType+config.path.css`? Are they relative path from the root of the project, where you run `gulp`? Regardig the config, it's not `gulp-compass` config, but [`compass` confg itself](http://compass-style.org/help/tutorials/configuration-reference/). One more thing, Compass only adds libs to SASS. Thereof, the ability of compiling `.sass` and `.scss` are not from Compass, but SASS itself, so `gulp-sass` should do the work for you anyway. — Caio Cunha, May 16 '14 at 13:39
Thanks for the quick answer. `buildType+config.path.sass` is a valid String coming from a Json config file, i'm using it in other tasks in the same gulpfile and it works perfectly. When i'm using `gulp-sass` instead of 'compass' another error shows up when reading the file (`[gulp] [gulp-sass] source string:4: error: error reading values after $gray` and others like this). I assume that `.sass` files are not supported by gulp-sass but only `.scss`. — soenguy, May 16 '14 at 14:04
gulp does not care what the file extension is. It uses the `node-sass` parser which does. Consider using `gulp-ruby-sass` as it should have support for .scss and .sass extensions. It then can reduce the possible errors to narrow your issue. — SteveLacy, May 17 '14 at 05:50
Thanks @SteveLacy. Everything works as expected ! Answer has been posted. — soenguy, May 19 '14 at 07:07

score 5 · Accepted Answer · answered May 19 '14 at 07:06

Thanks to SteveLacy i could manage to fix this.

If you only have .sass files, and no .scss, you need to use gulp-ruby-sass instead of gulp-compass or gulp-sass. Here is a sample of my working code :

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

gulp.task('compile-sass', function() {
    gulp.src(path/to/your/sass/folder/main.sass")
        .pipe(sass())
    .pipe(gulp.dest('path/to/your/css/folder));
});

score 2 · Answer 2 · answered Jul 12 '14 at 06:00

2

The most basic and simple way is:

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

gulp.task('styles', function() {
    gulp.src('sass/*.scss')
    .pipe(sass({ 
        noCache : true,
        style   : "compact"
    }))
    .pipe(gulp.dest('css'));
});

answered Jul 12 '14 at 06:00

elmauro

39
3

1

Don't you mean ``sass/*.sass`` ? – Adam Grant Jul 14 '14 at 14:19

score 2 · Answer 3 · answered Jul 30 '14 at 17:35

The newest version of node-sass which is used by gulp-sass supports sass and scss syntax.

https://github.com/sass/node-sass/releases

or the latest release at this moment

https://github.com/sass/node-sass/releases/tag/v0.9.3

node-sass is using libsasss

https://github.com/sass/libsass/releases

Look at their 2.0 release notes.

score 0 · Answer 4 · answered Jun 17 '16 at 01:26

I know this may not be the correct place for this answer, but there wasn't much on Google for people with gulp-ruby-sass errors.

For anyone receiving an error "source does not match any files." Be sure to make sure the path(s) you place within gulp.src() have at least 1 sass (or scss) file within them.

In my situation, I had 3 paths for the task and only 1 of the paths was completely empty. By adding a blank file (_fake.scss) to that path the error was fixed.

Hope this helps someone!

score 0 · Answer 5 · answered Feb 13 '19 at 21:54

Newer versions of node-sass (and therefore gulp-sass, which is just a thin wrapper around node-sass) handle both sass and scss syntax, and decides which syntax to use by reading the file extension.

Here is a demonstration of a gulp file which handles both scss and sass syntax (not that you'd want that in your project):

var sass = require('gulp-sass');
sass.compiler = require('node-sass');

gulp.task('my-sass-task', function () {
  return gulp.src('styles/**/*.sass')   // note file ext
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('static'));
});

gulp.task('my-scss-task', function () {
  return gulp.src('styles/**/*.scss')   // note file ext
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('static'));
});

This doesn't seem to be documented anywhere easy to find, I just happened to stumble on it.

Side note: I was wooed by sass but think I'll be moving to scss instead. This SO question has a lot of useful information in the answers if you're hovering over which to choose.

gulp-sass not compiling sass files

5 Answers5