anyone know what causes error:file to import not found or unreadable

[nitrokevin]

Ive started getting the following error

[21:20:31] gulp-notify: [Sass Error] assets/scss/foundation.scss
Error: File to import not found or unreadable: app
Parent style sheet: stdin
on line 91 of stdin

@import "app";

but not just on app.scss, its happening on all of them.

All files are there and scss is still compiling, well sometimes it is

[colin-marshall]

What directory is app.scss in?

[GarySwift]

I would check again. That is the error you get when you try to import a file that isn't there.

I even added the import to see what would happen.

[17:28:51] gulp-notify: [Sass Error] assets/scss/theme/theme.scss
Error: File to import not found or unreadable: app
       Parent style sheet: /Users/mac/Code/test-site/wp-content/themes/FoundationPress/assets/scss/theme/theme.scss
        on line 20 of assets/scss/theme/theme.scss
>> @import "app";

[nitrokevin]

Its any scss file but it only happens intermittently, they files are definitely there. it will happen for a while and the site doesn't load css, but if i carry on making more changes eventually the error goes away and the site loads normally

[nitrokevin]

the files are in the scss folder

[colin-marshall]

So assets/scss/app.scss is where the file is at? Can you show us the entire contents of your foundation.scss file?

[nitrokevin]

yes thats right

`/*
Foundation for Sites components:
Import the building blocks you need for your project.
Reducing the number of imported components will optimize page speed.

---

The Foundation framework is built by Zurb
Licensed under MIT Open Source
*/

// Settings
@import "global/settings"; // Foundation settings file.
@import "global/custom-settings"; // Foundation settings file.
// Foundation mixins & browser resets
@import '../components/foundation-sites/scss/foundation';

// WP overrides
@import "global/wp-admin"; // Fix issues with wp-admin bar positioning
@import "global/wp-overrides"; // Override the default WordPress styling for some elements

// Third-party libraries
@import 'font-awesome';
@import 'motion-ui';

// Foundation global styles
@include foundation-global-styles;

// Individual foundation components
@include foundation-grid;
@include foundation-typography;
@include foundation-button;
@include foundation-forms;
@include foundation-visibility-classes;
@include foundation-float-classes;
@include foundation-accordion;
@include foundation-accordion-menu;
// @include foundation-badge;
// @include foundation-breadcrumbs;
@include foundation-button-group;
// @include foundation-callout;
// @include foundation-close-button;
// @include foundation-drilldown-menu;
// @include foundation-dropdown;
// @include foundation-dropdown-menu;
// @include foundation-flex-video;
@include foundation-label;
@include foundation-media-object;
@include foundation-menu;
@include foundation-off-canvas;
// @include foundation-orbit;
// @include foundation-pagination;
// @include foundation-progress-bar;
@include foundation-slider;
@include foundation-sticky;
@include foundation-reveal;
@include foundation-switch;
@include foundation-table;
@include foundation-tabs;
@include foundation-thumbnail;
@include foundation-title-bar;
@include foundation-tooltip;
@include foundation-top-bar;

// Motion UI
// @include motion-ui-transitions;
// @include motion-ui-animations;

/*
My custom styles:
Add your scss files below to structure your project styles
*/

// Modules
@import "modules/navigation";
@import "modules/footer";
@import "modules/sidebar";

// Components
@import "components/buttons";
@import "components/featured-image";
@import "components/dividers";
@import "components/links";

// Templates
@import "templates/front";
@import "templates/kitchen-sink";
@import "templates/page-default";
@import "templates/page-sidebar-left";
@import "templates/page-full-width";
@import "templates/single-post";
@import "templates/positive-front";
@import "app";
`

[colin-marshall]

Ok, I think it's because your file is named app.scss and you are importing it. You can only import files (partials) that begin with an underscore, so rename it to _app.scss and see if that fixes it.

[nitrokevin]

Hi I’ve already tried that, in fact it stated as _app.scss then changed to app.scss after I started getting the error

On 19 Feb 2016, at 23:18, Colin Marshall notifications@github.com wrote:

Ok, I think it's because your file is named app.scss and you are importing it. You can only import files (partials) that begin with an underscore, so rename it to _app.scss and see if that fixes it.

—
Reply to this email directly or view it on GitHub #731 (comment).

[colin-marshall]

Well change it back to _app.scss because that is definitely what it needs to be if you are importing it. Just change it back, try again, and show me the error.

[colin-marshall]

And is this the same project you were having trouble with earlier with the permissions issue on the server?

[nitrokevin]

It is a new project.. I think the problem may be that I am working remotely, as in I am connecting to the site via Coda from home and the site is on the server at work, which is also running the watch command.

Could it be that there is a delay when saving the file and so watch is detecting a change before the file has finished saving? I don't know this is just a guess as I haven't got the error while at work

[colin-marshall]

Sounds like you are probably correct about that if it works fine from your work. A better option might be to run a vagrant box on the machine you use at home when you're developing and use git to push changes to the remote when you are satisfied with the results.

[nitrokevin]

Ok thanks I'll look into it ... I was wondering if there was any way to add a delay before it tries to process the changes

[colin-marshall]

Check out gulp-wait

[olefredrik]

Problem solved?

[nitrokevin]

Yes thanks, closed

[jendabek]

For now the gulp-wait is the only "solution" when coding with Visual Studio Code for me.
Thanks colin-marshall for the tip!

[mrforsythexeter]

I was having this issue when saving in sublime. The first time the file changed, gulp watch would fire before the file either completed saving, or was unreadable when lib-sass started. I added a 50ms delay to the pipe which seems to work.

[bobberr]

Guys, I have same trouble. Where should I use gulp-wait to solve this trouble?
I have such sass task:
gulp.task('style:build', function () {
gulp.src(path.src.style)
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(prefixer())
.pipe(cssmin())
.pipe(sourcemaps.write())
.pipe(gulp.dest(path.build.css))
.pipe(reload({stream: true}));
});

[leandro-almeida]

Hi @bobberr , i have done mine as follows (i'm using VSCode terminal to do the gulp watch):

gulp.task('sass', function () {
	return gulp.src(SCSS_SRC)
		.pipe(wait(500))
		.pipe(sass({
			outputStyle: 'compressed',
			includePaths: ['./bower_components/susy/sass', './bower_components/breakpoint-sass/stylesheets']
		}).on('error', sass.logError))
		.pipe(concat('style.css'))
		.pipe(autoprefixer({
			browsers: ['>1%', 'last 2 versions'],
			cascade: false
		}))
		.pipe(gulp.dest('./dist/css'));
});

[bobberr]

Thanks for help :)

[Jazcash]

The wait is a very awkward solution which differs depending on your machine's speed. On my machine at home I can get away with wait(50) but at work it needs to be around 1000 to work consistently.

Any idea what the actual cause of this is in VSCode and if there's a setting that could prevent it?

[AionDev]

😠 Lost 5 hours behind this bullshit 😠 . In my case was just the difference between @import modules/variables vs @import 'modules/variables' - meaning use apostrophe instead of back-ticks..

ERROR in ./~/css-loader!./~/sass-loader/lib/loader.js!./src/static/styles/main.sass
    Module build failed:
    @import `modules/variables`
    ^
          File to import not found or unreadable: `modules/variables`.

[colin-marshall]

@AionDev sorry for the late reply, but your issue is syntax-related which is different from the problem people are experiencing with the build system.

[tirmey]

Thanks for the gulp-wait hint.
I had that issue with VSCode and this module solves the problem!

[shamseerahammedm]

Was facing the same issue, installing gulp-wait solved the problem.thanks @leandro-almeida

[Sam-Pryor]

I had this issue in sublime text today, to fix:
In Preferences.sublime-settings, in your user settings add:
"atomic_save": true

[nocean]

@Sam-Pryor's fixed solved it for me. Thx m8.

[tatwd]

but in vscode(1.22.1) what should i do?

[FrancisOfosu105]

I was having this same issue. I was using gulp-watch to watch the scss files and compile them and finally inject it to the browser. I found that this issue will not occur if you have few folders (eg. 2 folders ) containing the few scss files. But when the folders and scss becomes plenty, you will start to have this issue. The only solution that worked for me was to install gulp-wait and delay the scss compilation.

[a-m-dev]

thanks @leandro-almeida , problem solved ....

[suhasranganath]

Thanks @leandro-almeida and @colin-marshall. gulp-wait solved this issue for me.

[roxigonzalez]

solved! remove ~

[Akbarshax23]

У меня была эта проблема в возвышенном тексте сегодня, чтобы исправить:
В настройках
.sublime -settings в настройках пользователя добавьте: «atomic_save»: true

thanks

[FrenkRio]

I had this issue in sublime text today, to fix:
In Preferences.sublime-settings, in your user settings add:
"atomic_save": true

it stopped the error from appearing but now the sass is not saving .... ????!!!! any help plz