Gulp-sass fails to compile scss file

css, gulp, sass

Solution

Keep your imports as is, just pass the `includePaths` option in your gulp sass module as an argument:

gulp.src('./_/sass/style.scss')
        .pipe(sass({ includePaths : ['_/sass/'] }))
        .pipe(gulp.dest('./'));

...should do it for you.

As per https://github.com/dlmanning/gulp-sass/issues/1

Problem

I'm using Gulp to compile my sass into css. A simple task compiles the `style.scss` file in the `_/sass` directory and saves the output into the root of the project. `style.scss` is used merely to import other files in the `_/sass` directory. When I run the default task from the command line (`$ gulp`) I get an error that the sass can't compile. It is included below in full. I have removed all content from the included files and run the task again. I still receive the same error (something I read online suggested this might test for an encoding issue. I don't fully understand encoding and how that might break things in my scenario). I've also run from the command line `$ sass _/sass/style.scss style.css` which works perfectly with content in the included files. This suggests to me a problem with the gulp sass plugin itself. The relevant snippets from gulpfile.js: ``` var gulp = require('gulp'); var sass = require('gulp-sass'); // Compile sass files gulp.task('sass', function () { gulp.src('./_/sass/style.scss') .pipe(sass()) .pipe(gulp.dest('./')); }); // The default task (called when you run `gulp`) gulp.task('default', function() { gulp.run('sass'); // Watch files and run tasks if they change gulp.watch(['./_/sass/style.scss'], function() { gulp.run('sass'); }) }); ``` The full contents of style.scss: ``` /* RESET */ @import '_/sass/reset'; /* TYPOGRAPHY */ @import '_/sass/typography'; /* MOBILE */ @import '_/sass/mobile'; /* MAIN */ @import '_/sass/main'; ``` The directory structure: ``` ├── _ │   ├── inc │   │   ├── stuff │   ├── js │   │   ├── otherstuff.js │   └── sass │   ├── main.scss │   ├── mobile.scss │   ├── print.scss │   ├── reset.scss │   ├── style.scss │   └── typography.scss ├── gulpfile.js └── style.css ``` Terminal spits out: ``` [gulp] Using file /Users/jeshuamaxey/project/dir/path/gulpfile.js [gulp] Working directory changed to /Users/jeshuamaxey/project/dir/path/html5reset [gulp] Running 'default'... [gulp] Running 'sass'... [gulp] Finished 'sass' in 3.18 ms [gulp] Finished 'default' in 8.09 ms stream.js:94 throw er; // Unhandled stream error in pipe. ^ source string:11: error: file to import not found or unreadable: 'reset' ```

Original source