Jeshua Jeshua - 1 year ago 251
CSS Question

Gulp-sass fails to compile scss file

I'm using Gulp to compile my sass into css. A simple task compiles the

file in the
directory and saves the output into the root of the project.
is used merely to import other files in the

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 () {

// The default task (called when you run `gulp`)
gulp.task('default', function() {'sass');

// Watch files and run tasks if they change['./_/sass/style.scss'], function() {'sass');

The full contents of style.scss:

/* RESET */
@import '_/sass/reset';
@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

throw er; // Unhandled stream error in pipe.
source string:11: error: file to import not found or unreadable: 'reset'

Answer Source

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

        .pipe(sass({ includePaths : ['_/sass/'] }))

...should do it for you.

As per

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download