0

I am trying to use foundation sites in my project so I downloaded it using bower.

I have a gulp.config.js file which has the following code:

module.exports = function() {
  // PATHS TO JS AND SASS
  var GETPATHS = {
    VENDOR: [
      'bower_components/jquery/dist/jquery.min.js'
    ],
    JS: [
      'bower_components/foundation-sites/js/foundation.core.js',
      'src/assets/**/*.js'
    ],
    SASS: [
      'bower_components/foundation-sites/scss',
      'src/assets/scss/components'
    ]
  }
  return GETPATHS;
}

and my gulpfile itself has this (SASS):

gulp.task('sass', function() {
  return gulp.src('src/assets/scss/app.scss')
      .pipe(sass({ includePaths: config.SASS }))
      .pipe(autoprefixer())
      .pipe(cssnano())
      .pipe(gulp.dest('_build/assets/css'))
      .pipe(browserSync.stream());
});

and here's my app.scss file

@import "foundation";

Now, the problem is I don't know why app.css (after getting compiled) is showing an empty file. The import "foundation" doesn't seem to work. Any help is appreciated as I am quite new to this. Thanks!

TheEarlyMan
  • 384
  • 4
  • 15

1 Answers1

0

I suggest installing one of the Foundation Sites templates or using the foundation cli to bootstrap a project and get the needed file with all imports.

foundation.scss just contains the mixins. You can see an example for the right config at https://github.com/zurb/foundation-zurb-template/blob/master/src/assets/scss/app.scss and https://github.com/zurb/foundation-sites-template/blob/master/scss/app.scss

Also see Gulp & Foundation 6 not compiling