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?
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?
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.
I get this intermittently as well, it's also an error on the last file I save but I can't reproduce consistently.
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
@Snugug I gave that a shot and I'm running into the same issue.
@Snugug @kyleva Same here
@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.
@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
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 [email protected] 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.
@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
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 [email protected] 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\websitegulpfile.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: srcsass\main.scss
10:9 file to import not found or unreadable: parts/hero
—
Reply to this email directly or view it on GitHub.
@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/
Thanks, I'll take a look
@Snugug If you'd like a zip archive with the files I can send it to you.
@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 );
});
@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
@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
@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:
Just an FYI, this issue also occurs when scaffolding out a site using Yeoman's gulp-webapp.
@peterankelein +1 on that as well. When using Yeoman's generator-gulp-webapp you also receive this error.
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 [email protected]):
Error in plugin 'gulp-sass'
Message:
sass\main.scss
12:9 file to import not found or unreadable: partials/front-page
Current dir:
Hello there
I'm assuming this https://github.com/dlmanning/gulp-sass/issues/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 ?
Now it's not working at all
In order for us to help debug this problem, please follow the following steps:
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
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
@Soularix that is a bug in npm i believe? https://github.com/npm/npm/issues/7829
Also that is a different issue, please open another one if you believe it to be from gulp-sass
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.
Here's a repo of a minimal sample where I'm having the issue. Important info is in the README:
https://github.com/ethanclevenger91/gulp-sass-partials-bug
Cloned it and tried on my machine (archlinux), it compiles fine.
Is everyone else using Windows? Looks like a node-sass or libsass issue at a first glance
To be clear - it _usually_ works. I get the error ocassionally, and if I hit save again, it'll usually move right past it.
I did over 100 changes without getting an error, how often does that happen?
More often than 1 in 100. I'd say 1 in 20 or so. If I had to guess, it's as if gulp-watch fires the style task before the new copy is written to disk sometimes. Sublime 3 is my text editor, for context.
I just cloned it and made some changes to to _nav.scss and I get the error
more often than that. One out of five times give or take. Win 7, if it
makes a difference.
On Thu, May 7, 2015 at 11:23 AM, Ethan Clevenger [email protected]
wrote:
More often than 1 in 100. I'd say 1 in 20 or so. If I had to guess, it's
as if gulp-watch fires the style task before the new copy was written to
storage sometimes. Sublime 3 is my text editor, for context.—
Reply to this email directly or view it on GitHub
https://github.com/dlmanning/gulp-sass/issues/235#issuecomment-99908534.
_Peter Ankelein_ | Designer + Front-End Developer
Phone: 646.708.1132
Website: http://www.frequencybox.com
LinkedIn: http://www.linkedin.com/in/peterankelein
me too windows 7 , sublime text 3 & I also think it's a node-sass or libsass issue
@ethanclevenger91 I have a feeling you're onto something with your most recent response.
@Snugug Here's the stuff you asked for!
Steps to reproduce
npm install gulp watch ./sass/parts/hero.scss and save repeatedly until you see error in ConsoleHey guys, I don't know if it helps, but I just found out that enabling atomic save in Sublime Text 3 fixes the problem for me ( I had set it to false, default is true).
So it seems like everyone having that issue is on Windows.
Definitely sounds like a bug on node-sass/libsass or gulp watch that is platform-specific.
gulp-sass only takes file it gets from a stream, give them to node-sass and returns the result.
@smiddus +1 -- In Sublime Text 3, after setting the atomic_save property to true in my user settings I no longer receive this error.
Seems legit - I'll update if the issue persists, but seems to be resolved by this atomic_save business, though I'd like to know more about the details of this. What's going on and why.
same here, was solved by changing atomic_save
Looks like that may indeed be the culprit. I added "atomic_save" : true to my user settings (ST3) and no errors from the brief testing I did. Switched it back to false and received the partials error on the third save. The weird thing is that if you google atomic_save, you'll find users lobbied to make 'false' as the default because of it's bugginess and weird problems when set to true. This is the exact opposite.
Hi, I can also confirm that adding "atomic_save" : true to my ST3 settings solved this annoying issue for me. Switching back to false makes the errors fire again. Thanks for the tip!
Late response from me here as I only solved it by reformatting my Windows 8 machine, I do however use ST 3 and assume that this was my problem also. If this is a bulletproof solution then thanks everyone for getting to the bottom of it. Drove me crazy for a long time.
As this seems to have been resolved, I'm going to close this issue.
Hey guys... it solved my problem too.. thanks! :)
I think this is the solution, thanks guys. So glad this was found as it was driving me mad. Simply just edited the ST3 default settings so that: "atomic_save" : true
Even activating that option on Sublime text 3, I had the same error one time.
I really don't understand why this occurs with gulp-sass. :(
Thank u very much for "atomic_save" : true. It's worked!
Thank you soo much :) atmoic_save: true works. I wonder how was that figured that out though :)
Nice )
Thanks for "atomic_save": true
I solved this issue with the atomic_save setting from Sublime Text 3 also.
Thanks everybody!
I do wonder, why does this issue occur primarily with gulp-sass and not other tools which are watching the files? For example, why doesn't gulp-ruby-sass exhibit the same problem? I'm curious to understand what gulp-sass is doing differently (or rather, what gulp-ruby-sass is doing differently, although all other tasks in my pipeline also run fine).
@smiddus Cool!
Thanks for "atomic_save": true
@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.
so we need to switch to sublime in order to get around this problem? <- emacs user.
@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.
Thanks @agopshi. Additionally, I have just realized that I am not getting this error using Github Atom.
I am in fact getting this error using Atom. This issue does not seem resolved to me.
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
Using Sublime 3 on mac and atomic_save: true works for me
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.
"atomic_save": true
Helpfull ! This is solution of this problem! Thanks !!!
"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.
I'm using Sublime Text 2 and the "atomic_save": true dosen't help.
"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.
This solution worked for me.
Note: make sure you're editing the settings in the right area.
For Windows....
(Toolbar)-->Preferences-->Settings (User)
Huge help thanks!
把"atomic_save"设置为true,就可以了!!!!。。谢谢各位大神~~~~
So? I'm an Github Atom user and this "fix" doesn't work :S
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.
@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.
@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.
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.
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.
I had to switch to grunt due to this specific issue :(
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.
I can confirm this
I'm using Sublime Text 2 and the "atomic_save": true dosen't help.
I am also using Sublime Text 2,the "atomic_save: true " doesn't work.
This is a gulp problem, not a gulp-sass problem. We have no power over whether watch is actually watching.
Most helpful comment
@smiddus +1 -- In Sublime Text 3, after setting the
atomic_saveproperty totruein my user settings I no longer receive this error.