Problem with importing foundation.scss into main.scss

i have added foundation-sites through bower
then in gulpfile included path to bower_components/foundation-sites/scss/**/*.scss

gulp.task('styles', () => {
  return gulp.src('app/styles/*.scss')
    .pipe($.plumber())
    .pipe($.sourcemaps.init())
    .pipe($.sass.sync({
      outputStyle: 'expanded',
      precision: 10,
      includePaths: 'bower_components/foundation-sites/scss/**/*.scss'
    }).on('error', $.sass.logError))
    .pipe($.autoprefixer({browsers: ['> 1%', 'last 2 versions', 'Firefox ESR']}))
    .pipe($.sourcemaps.write())
    .pipe(gulp.dest('.tmp/styles'))
    .pipe(reload({stream: true}));
});

then in main.scss have added @import 'foundation';
but get return error

Error in plugin 'sass'
Message:
    app\styles\main.scss
Error: File to import not found or unreadable: foundation
       Parent style sheet: C:/Users/User/Desktop/future tech/app/styles/main.scss
        on line 4 of app/styles/main.scss
>> @import 'foundation';

You don’t need to import in your main.scss file. Gulp is concatenating the files for you. You’re getting the error because the SCSS importer has no idea where to find the file foundation.scss.

what about this line?
includePaths: 'bower_components/foundation-sites/scss/**/*.scss
doesn’t it supposed to let me write
@import 'foundation';
instead of
@import '../../bower_components/foundation-sites/scss/foundation ';

Nope! That line in your Gulp file is what mashes your Sass files together.

so what should i do in this case?

You know what? I’m an idiot. I don’t know what I was thinking of, but it wasn’t gulp-sass. You are right that you need the @import statement. I think the problem is just that you had the glob pattern at the end of the includPaths option. Try using just bower_components/foundation-sites/scss/, and keep the @import because, again, I’m not “all there” it seems.

1 Like

oh man dont be so self-critical cos in fact you advice to use bower_components/foundation-sites/scss/ worked!:smiley:

1 Like