Partials not found error

[vdecree]

Hi there,

I've only found one submission for this problem but the fix doesn't work for me. Every so often at random intervals I get the error: file to import not found or unreadable: partials/header

I've tried setting the include paths but to no avail. My task looks like:

gulp.task('sass', function() {
    gulp.src('assets/scss/**/*.scss')
        .pipe(sass({style: 'expanded', includePaths: [ './assets/scss/partials', './assets/scss/modules', './assets/scss/helpers' ], errLogToConsole: true }))
        .pipe(autoprefixer('last 2 version'))
    .pipe(rename(pkg.name + '.css'))
        .pipe(gulp.dest('assets/css'));
        // .pipe(reload({stream: true}))
        //.pipe(notify({message: 'SCSS processed!'}));
});

I also tried commenting parts out in order to find a problem line but nothing seems to help. Any ideas?

[kyleva]

I'm running into this as well. My styles task doesn't behave in a consistent manner at all which is making it very difficult to diagnose/troubleshoot. Sometimes it will error on the first save, sometimes it doesn't. Other times, it throws the error three times in the row and then works fine on the fourth save. Sometimes it even works five to ten times in a row and then will randomly throw the error (even when I don't edit anything, just pressing CTRL+S and saving).

Here's the error I'm receiving in my Console:

[gulp-sass] file to import not found or unreadable: pages/shop

app/styles/main.scss:

@import "pages/shop";

app/styles/pages/shop.scss:

#hero.page-shop {
    background-position: -470px center;
    background-size:100%; /* for some older devices */
    background-size:cover;

    @media(min-width:430px){
        background-position:-410px center;
    }

    @media(min-width:495px){
        background-position:-350px center;
    }   

    @media(min-width:550px){
        background-position:-290px center;
    }

    @media(min-width:600px){
        background-position:center center;
    }
}

Gulp task:

gulp.task('styles', function () {
  return gulp.src('app/styles/main.scss')
    .pipe($.plumber())
    .pipe($.sass({
      errLogToConsole: true
    }))
    .pipe($.autoprefixer({browsers: ['last 1 version']}))
    .pipe(gulp.dest('.tmp/styles'));
});

My folder structure:

.
+-- app
|   +-- styles
|       +-- pages
|       |   |
|       |   +-- shop.scss
|       |
|       +-- main.scss
|
+-- gulpfile.js

I've tried: reinstalling node, reinstalling npm modules, uninstalling all npm modules and reinstalling.

Any idea what might be going on?

[kyleva]

Another note:

Even if I remove the contents of shop.scss and it's a completely empty file and I save I sometimes get the error. Here's an example of what logs in my Console when I save the empty shop.scss file a few times without making any changes between saves.

[17:32:41] Starting 'styles'...
[17:32:41] [gulp-sass] file to import not found or unreadable: pages/shop
Current dir: E:/Web/website/app/styles/ on line 13 in E:/Web/website/app/styles/main.scss
[17:32:41] Finished 'styles' after 2.93 ms
[17:32:42] Starting 'styles'...
[17:32:43] Finished 'styles' after 146 ms
[17:32:43] main.css was reloaded.
[17:32:44] Starting 'styles'...
[17:32:44] Finished 'styles' after 96 ms
[17:32:44] main.css was reloaded.
[17:32:45] Starting 'styles'...
[17:32:45] Finished 'styles' after 104 ms
[17:32:45] main.css was reloaded.
[17:32:46] Starting 'styles'...
[17:32:46] Finished 'styles' after 96 ms
[17:32:46] main.css was reloaded.
[17:32:47] Starting 'styles'...
[17:32:47] [gulp-sass] file to import not found or unreadable: pages/shop
Current dir: E:/Web/website/app/styles/ on line 13 in E:/Web/website/app/styles/main.scss
[17:32:47] Finished 'styles' after 11 ms

Sometimes it errors out, sometimes it doesn't.

[andy-hook]

I get this intermittently as well, it's also an error on the last file I save but I can't reproduce consistently.

[Snugug]

Please try with the 2.x branch. If we don't hear back, we'll assume it's been resolved and close this issue.

npm install dlmanning/gulp-sass#2.x

[kyleva]

@Snugug I gave that a shot and I'm running into the same issue.

[vdecree]

@Snugug @kyleva Same here

[Snugug]

@kyleva @vdecree I've seen reports that people have found success by physically deleting their current gulp-sass folder in node_modules and reinstalling.

Please also try with a reduced use case, literally just gulp-sass compiling, nothing else, and provide the versions of node-sass, gulp-sass, and gulp you're using.

[kyleva]

@Snugug I've gone as far as deleting my node_modules file, removing all globally installed npm packages, uninstalling node and re-installing, etc. Slimmed my gulpfile.js down and still received an error:

gulpfile.js

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

gulp.task('styles', function () {
  return gulp.src('./sass/main.scss')
    .pipe(sass({
      errLogToConsole: true
    }))
    .pipe(gulp.dest('./css/main.css'));
});

gulp.task('watch', function () {
  gulp.watch('./sass/**/*.scss', ['styles']);
});

If I run the gulp sass task it does not error. Only when running gulp watch will it error out.

Example: if I run gulp watch and edit ./sass/parts/hero.scss there's a 50/50 chance I receive this error: [gulp-sass] file to import not found or unreadable: parts/hero.

Version info

• gulp-sass: 1.33
• node-sass: 2.1.1
• gulp: 3.8.11

[Snugug]

Please try it with the newest version of gulp sass

npm install gulp-sass@next --save-dev

On Apr 24, 2015, at 8:21 PM, Kyle Stearns notifications@github.com wrote:

@Snugug I've gone as far as deleting my node_modules file, removing all globally installed npm packages, uninstalling node and re-installing, etc. Slimmed my gulpfile.js down and still received an error:

gulpfile.js

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

gulp.task('styles', function () {
return gulp.src('./sass/main.scss')
.pipe(sass({
errLogToConsole: true
}))
.pipe(gulp.dest('./css/main.css'));
});

gulp.task('watch', function () {
gulp.watch('./sass/*/.scss', ['styles']);
});
If I run the gulp sass task it does not error. Only when running gulp watch will it error out.

Example: if I run gulp watch and edit ./scss/parts/hero.scss' I will receive the following error:[gulp-sass] file to import not found or unreadable: parts/hero`.

Version info

gulp-sass: 1.33
node-sass: 2.1.1
gulp: 3.8.11
—
Reply to this email directly or view it on GitHub.

[kyleva]

@Snugug Upgraded to the newest version of gulp-sass using your provided snippet: npm install gulp-sass@next --save-dev

Still receiving the error intermittently (saving a couple times in a row without making any changes to file - works fine twice, then errors the third time):

[11:19:25] Using gulpfile E:\web\website\gulpfile.js
[11:19:25] Starting 'watch'...
[11:19:26] Finished 'watch' after 186 ms
[11:19:26] Live reload server listening on: 35729
[11:19:28] Starting 'styles'...
[11:19:28] Finished 'styles' after 357 ms
[11:19:28] main.css was reloaded.
[11:19:29] Starting 'styles'...
[11:19:29] Finished 'styles' after 273 ms
[11:19:29] main.css was reloaded.
[11:19:30] Starting 'styles'...

events.js:85
      throw er; // Unhandled 'error' event
            ^
Error: src\sass\main.scss
  10:9  file to import not found or unreadable: parts/hero

[Snugug]

You deleted the previous gulp sass version and updated your gulp task accordingly, yes?

Please also supply a reduced use case of Sass where we can see this happening

On Apr 25, 2015, at 11:22 AM, Kyle Stearns notifications@github.com wrote:

@Snugug Upgraded to the newest version of gulp-sass using your provided snippet: npm install gulp-sass@next --save-dev

Still receiving the error intermittently (saving a couple times in a row without making any changes to file - works fine twice, then errors the third time):

[11:19:25] Using gulpfile E:\web\website\gulpfile.js
[11:19:25] Starting 'watch'...
[11:19:26] Finished 'watch' after 186 ms
[11:19:26] Live reload server listening on: 35729
[11:19:28] Starting 'styles'...
[11:19:28] Finished 'styles' after 357 ms
[11:19:28] main.css was reloaded.
[11:19:29] Starting 'styles'...
[11:19:29] Finished 'styles' after 273 ms
[11:19:29] main.css was reloaded.
[11:19:30] Starting 'styles'...

events.js:85
throw er; // Unhandled 'error' event
^
Error: src\sass\main.scss
10:9 file to import not found or unreadable: parts/hero
—
Reply to this email directly or view it on GitHub.

[kyleva]

@Snugug Before my previous post I did the following: npm uninstall --save-dev gulp-sass, npm install gulp-sass@next --save-dev, reduced gulpfile.js to the following:

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

gulp.task('styles', function () {
  return gulp.src('src/sass/main.scss')
    .pipe(sass())
    .pipe(gulp.dest('src/css/'))
});

gulp.task('watch', function () {
  gulp.watch('src/sass/**/*.scss', ['styles']);
});

When running gulp watch and saving the ./src/sass/parts/hero.scss file I received the following error:

stream.js:94
      throw er; // Unhandled stream error in pipe.
            ^
Error: file to import not found or unreadable: parts/hero
Current dir: E:/web/website/src/sass/

[Snugug]

Thanks, I'll take a look

[kyleva]

@Snugug If you'd like a zip archive with the files I can send it to you.

[akrawchyk]

@kyleva try getting rid of the errLogToConsole option. Here's an example that works for me:

function handleErrors() {
  var gutil = require('gulp-util');
  var args = Array.prototype.slice.call(arguments);

  gutil.log(gutil.colors.white.bgRed.underline.bold('Gulp error:'));
  gutil.log(gutil.colors.red(args));

  // continue with gulp tasks
  this.emit('end');
}

gulp.task('css', function () {
  var sass = require('gulp-sass');
  return gulp.src( './**/*.scss' )
  .pipe(sass())
  .on( 'error', handleErrors );
});

[kyleva]

@akrawchyk No dice on that one! Here's my gulpfile:

var gulp = require('gulp');

function handleErrors() {
  var gutil = require('gulp-util');
  var args = Array.prototype.slice.call(arguments);

  gutil.log(gutil.colors.white.bgRed.underline.bold('Gulp error:'));
  gutil.log(gutil.colors.red(args));

  this.emit('end');
}

gulp.task('styles', function () {
  var sass = require('gulp-sass');

  return gulp.src('./sass/main.scss')
    .pipe(sass())
    .pipe(gulp.dest('./css/'))
    .on( 'error', handleErrors );
});

gulp.task('watch', function () {
  gulp.watch('./sass/**/*.scss', ['styles']);
});

Error:

[20:35:31] Starting 'styles'...
[20:35:31] Gulp error:
[20:35:31] Error in plugin 'gulp-sass'
Message:
    file to import not found or unreadable: parts/hero
Current dir: E:/web/issue-gulp-sass/sass/
Details:
    fileName: E:/web/issue-gulp-sass/sass/main.scss
    lineNumber: 1
[20:35:31] Finished 'styles' after 104 ms

package.json:

{
  "private": true,
  "engines": {
    "node": ">=0.10.0"
  },
  "devDependencies": {
    "gulp": "^3.8.11",
    "gulp-sass": "^1.3.3",
    "gulp-util": "^3.0.4"
  },
  "name": "gulpSassIssue",
  "version": "1.0.0",
  "description": "An issue with gulp sass",
  "main": "gulpfile.js",
  "directories": {
    "test": "test"
  },
  "dependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Folder structure:

.
+-- sass
|   +-- parts
|   |   |
|   |   +-- hero.scss
|   |
|   +-- main.scss
|
+-- gulpfile.js
+-- package.json

[Snugug]

@kyleva your package.json still says gulp-sass 1.3.3. Please use the latest version of gulp-sass, 2.0.0-alpha.1, available by doing npm install gulp-sass@next --save-dev

[kyleva]

@Snugug Thanks for the suggestion. I had previously attempted using the latest version and ran into the same issue. Tried it again today and still receiving the error.

package.json:

{
  "private": true,
  "engines": {
    "node": ">=0.10.0"
  },
  "devDependencies": {
    "gulp": "^3.8.11",
    "gulp-sass": "^2.0.0-alpha.1",
    "gulp-util": "^3.0.4"
  },
  "name": "gulpSassIssue",
  "version": "1.0.0",
  "description": "An issue with gulp sass",
  "main": "gulpfile.js",
  "directories": {
    "test": "test"
  },
  "dependencies": {},
  "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Error:

events.js:85
      throw er; // Unhandled 'error' event
            ^
Error: sass\main.scss
  1:9  file to import not found or unreadable: parts/hero
Current dir:

[peterankelein]

Just an FYI, this issue also occurs when scaffolding out a site using Yeoman's gulp-webapp.

[kyleva]

@peterankelein +1 on that as well. When using Yeoman's generator-gulp-webapp you also receive this error.

[ethanclevenger91]

I'm also running into this on several projects. Usually if I save a couple times it'll eventually get past it. Let me know if I can provide anything helpful.

Gulpfile:

gulp.task('styles', function() {
    return gulp.src(paths.styles)
        .pipe(plumber())
        .pipe(sass({
            errLogToConsole:true,
            includePaths: bowerFiles('**/*.{scss,sass,css}').map(function(file) {
                return path.dirname(file);
            })
        }))
        .pipe(autoprefix())
        .pipe(gulp.dest(destPaths.styles))
        .pipe(notify('Styles task complete!'));
});
...
gulp.task('browser-sync', function () {
    var files = [
        '**/*.html',
        '**/*.php',
        'build/css/main.css',
        'build/js/main.js',
        'build/img/**/*.{png,jpg,jpeg,gif,svg}'
    ];
    browserSync.init(files, {
        proxy: 'http://example.com', // Proxy for local dev sites
    });
});

Main Sass file:

@import 'base/variables';
@import 'base/mixins';
@import 'bootstrap';
@import 'font-awesome';
@import 'base/wordpress';
@import 'base/resets';

//Parts
@import 'partials/nav';
@import 'partials/header';
@import 'partials/front-page';

Intermittent error (latest, using gulp-sass@2.0.0-alpha.1):

Error in plugin 'gulp-sass'
Message:
    sass\main.scss
 12:9 file to import not found or unreadable: partials/front-page
Current dir: 

[Keats]

Hello there

I'm assuming this #250 is the same issue as this one right?

Can you all try to update to gulp-sass 2.0 (now on npm) and try again ?

[Soularix]

Now it's not working at all

[Snugug]

In order for us to help debug this problem, please follow the following steps:

• Update to the latest Gulp Sass following our instructions.
• Create a reduced case that reproduces the issue (smallest amount of Sass, only the Sass task, etc…) and post a zip of the folder (without the node_modules folder) it online for us to review.

Please also include your node version, npm version, operating system, and double check your gulp-sass and node-sass versions by checking the version number in node_modules/gulp-sass and node_modules/gulp-sass/node_modules/node-sass

[Soularix]

I have problem in installing gulp-sass, I even created a new folder when I try to install " npm install gulp-sass --save-dev " I get this error :
npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs
\node_modules\npm\bin\npm-cli.js" "install" "gulp-sass" "--save-dev"
npm ERR! node v0.12.2
npm ERR! npm v2.7.4

npm ERR! Cannot read property 'trim' of undefined
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! https://github.com/npm/npm/issues

npm ERR! Please include the following file with any support request:
npm ERR! C:\Users\Souhaib\Desktop\hello\npm-debug.log

[Keats]

@Soularix that is a bug in npm i believe? npm/npm#7829
Also that is a different issue, please open another one if you believe it to be from gulp-sass

[smiddus]

Exactly the same issue on Windows 7 here. 'file to import not found or unreadable' error in about 40% of the cases using gulp watch.

Followed the steps above and didn't help. Moved the project to my SSD and for now the problems seem to have gone.

[iMarkup]

@smiddus Cool!
Thanks for "atomic_save": true

[tiborsaas]

@agopshi Probably gulp-sass is too fast :) atomic_save did fix it for me too, but I think this issue should be solved in gulp-sass. I'd expect it to keep trying to access to the changed file in short intervals within a few second time frame.

[negativefix]

so we need to switch to sublime in order to get around this problem? <- emacs user.

[agopshi]

@negativefix Using Sublime 3 with atomic_save: true is just a band-aid. gulp-sass is definitely doing something differently than most other gulp modules, and that's causing this issue. That's not to say that it's doing something wrong - it's just doing something differently, in a way that doesn't work with many text editors' save strategy. I don't know what it is, but if I can find the time, I'll try to dig in.

[negativefix]

Thanks @agopshi. Additionally, I have just realized that I am not getting this error using Github Atom.

[systimotic]

I am in fact getting this error using Atom. This issue does not seem resolved to me.

[jersonmr]

Hi all, i dont know if the problem was resolved but i use this solution and works to me... In the pipe sass i added a includePath to the route of my scss file
Example:
.pipe(sass({
includePaths: [config.bootstrapDir + '/assets/stylesheets/bootstrap']
}))
i hope this works to you too

[HarryWang74]

Using Sublime 3 on mac and atomic_save: true works for me

[mateusleon]

Adding to the discussion, another point that needs attention is that, if you save the file (which triggers the compiler), without any changes, the compiler crashes.

Context here is Windows 10, Sublime Text 2, NodeJS v4.2.2, NPM v3.3.10, and the devDeps, on package.json, as below:

{
 "devDependencies": {
    "connect-modrewrite": "^0.8.2",
    "gulp": "^3.9.0",
    "gulp-autoprefixer": "^3.1.0",
    "gulp-connect": "^2.2.0",
    "gulp-minify-css": "^1.2.1",
    "gulp-minify-html": "^1.0.4",
    "gulp-sass": "^2.1.0",
    "gulp-sourcemaps": "^1.6.0"
  },
  "engines": {
    "node": ">=0.10.0"
  }
}

The error Error: file to import not found or unreadable: common-configuration pops up on CMD and the process is aborted.

If I save the file, with changes, everything is fine.

Obs.: common-configuration is one of my imports.

[weblegko]

"atomic_save": true
Helpfull ! This is solution of this problem! Thanks !!!

[Neta-Alon]

"atomic_save": true does not work for me.
Node.js server is running on linux, editing done via Sublime Text (on Windows 8.1) and Sublime's package sftp.

For me the error is when editing .scss files. Edited files sometimes disappear from main.css, Restarting gulp command seems to fix it.

[zcoding]

I'm using Sublime Text 2 and the "atomic_save": true dosen't help.

[mkormendy]

"atomic_save": true does not work 100% for me either. Seems hit or miss here still. I'm editing files on a Windows server from ST3 on Mac over SMB. The gulpfile and process is running on the windows server.

[iansvo]

This solution worked for me.

Note: make sure you're editing the settings in the right area.

For Windows....

(Toolbar)-->Preferences-->Settings (User)

[afgarcia86]

Huge help thanks!

[justyy]

把"atomic_save"设置为true，就可以了！！！！。。谢谢各位大神~~~~

[sebastianlp]

So? I'm an Github Atom user and this "fix" doesn't work :S

[rahulv3a]

I'm using Github Atom. It doesn't have 'atomic_save' option.

Anybody knows how to fix this problem? Is there any workaround? Please share.

[smiddus]

@rahulnever2far
Is you project on an HDD? Before using the atomic_save option in Sublime, I experimented with putting my project on an SSD instead of a n HDD (because of faster disk access) and that also seemed to solve the problem. You might give it a try.

[rahulv3a]

@smiddus Yes, my project is on HDD.

By the way, the issue suddenly stopped occurring today. Weird! I will report back if it occurs again.

[joshkpeterson]

The "fix" didn't work for me on OSX / ST3. Seeing lots of other reports in the thread that this issue is unresolved, @Snugug can we reopen?

@import with sass needs to always just work.

[lcjf]

I've only started seeing this error since changing my SASS folder structure. Previously I had all of my imports coming from the same directory. Now that my imports are coming from sub-directories, I get the error. Don't really want to use "atomic_save" : true" if there's a non hacky soloution.

[rahulv3a]

I had to switch to grunt due to this specific issue :(

[lcjf]

This may or may not be of any use, but in my case I had commented out the below 2 lines in my .scss file:
@import "bourbon";
@import "neat";

Since removing the comments, everything works as it should.

Also, this is very strange, but even when I removed .concat(neat) from includePaths: ['src/styles/*.scss'].concat(neat) (with the 2 imports commented out) I still got the same error.

I'll post my task, in case it's of any use:

gulp.task('sass', function() {
    return gulp.src("./src/styles/*.scss")
        .pipe(sourcemaps.init())
        .pipe(sass({
            includePaths: ['src/styles/*.scss'].concat(neat)
        }))
        .on('error', notify.onError(function(error) {
            return 'An error occurred while compiling sass.\nLook in the console for details.\n' + error;
        }))
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(cssnano())
        .pipe(sourcemaps.write('maps'))
        .pipe(gulp.dest(''))
        .pipe(notify({
            message: 'SASS task complete',
            onLast: true
        }));
});

Edit: Okay, my apologies, I do still get this error, but not anywhere near as often as previously. It's probably more like 1 out of every 15 saves, rather than 1 out of 2.

[leph83]

I can confirm this

I'm using Sublime Text 2 and the "atomic_save": true dosen't help.

[blacksunset]

I am also using Sublime Text 2,the "atomic_save: true " doesn't work.

[xzyfer]

This is a gulp problem, not a gulp-sass problem. We have no power over whether watch is actually watching.