Gulp-sass fails to compile scss file

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'

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

For this you need to do start with same gulpfile.js folder

@import '_/sass/reset'

I think the Gulp reads the import and find the file from where gulpfile.js are located

If you use Sublime text with Windows, you should add rules in Sunlime config. Just add "atomic_save" : true in Preferences>Settings-User

https://github.com/dlmanning/gulp-sass/wiki/Common-Issues-and-Their-Fixes#partials-sporadically-not-found

来源：https://stackoverflow.com/questions/20957998/gulp-sass-fails-to-compile-scss-file

标签

css

Sass

gulp