error: File to import not found or unreadable: foundation

Question

The structure of my project:

project
  assets
    scripts
    styles
      foundation
        _settings.scss
      app.scss
  bower_components
  node_modules
  public
    css
      app.min.css
    js
  bower.json
  gulpfile.js
  package.json

I use gulp-sass to compile app.scss to app.min.css and i want foundation scss files to be included in my app.scss

Here's gulpfile.js:

gulp.task('styles', function() {
    return gulp.src('./assets/styles/app.scss')
    .pipe(sass({
        includePaths: ['./bower_components/foundation/scss']
    }))
    .pipe(autoprefixer({
        browsers: ['last 2 versions']
    }))
    .pipe(concat('app.min.css'))
    .pipe(minifyCss())
    .pipe(gulp.dest('./public/css'))
    .pipe(connect.reload());
});

And app.scss:

@import 'foundation/settings';
@import 'foundation';

When I change _settings.scss and then run gulp, all of the changes are saved and compiled. But when gulp is watching app.scss and I change something in _settings.scss I get the following error:

Error: assets\styles\app.scss
  1:9  file to import not found or unreadable: foundation/settings
Current dir:
    at options.error (D:\Dropbox\foundation-project\node_modules\gulp-sass\node_modules\node-sass\lib\index.js:276:32)

The most confusing thing that sometimes I get the same error when I run gulp, and sometimes I don't get this even when gulp is wathing app.scss

Answer 1

Your project will compile and run.

I rececive the same alert on phpStorm and it renders just fine, however at one point the foundation framework css was not loading. To fix this issue I did the following:

1) settings.scss add ' ' on line - @import 'foundation/_functions'; 2) in app.scss add the following import: @import 'foundation';