Correct Way to customize zurb foundation 6 with bower

Question

Using zurb foundation 6 with bower, what is the normal workflow to customize it using the _settings.scss file, so that the file doesn't stay in the bower_components folder.

This answer says that we could copy the settings file and then import it in our app.scss.

In my custom scss folder, I have made a settings.scss file using the _settings file as template, but in that case I also have to copy the entire utils folder as the settings file imports that.(or change the import path of the utils folder to the one in bower_components).

Is there a better way to do this ??

Edit

I am using gulp to compile the sass files.

gulp.task('sass', () => {

    gulp.src('./app/sass/app.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(concat('style.css'))
    .pipe(gulp.dest('./app'))

})

And this is what app.scss looks like right now (foundation.scss is a file which imports the scss files from inside the bower_components, while settings is a clone of the _settings file with some changes)

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

@include foundation-global-styles;
// @include foundation-grid;
@include foundation-flex-grid;
// @include foundation-typography;

Answer 1

You definitely want to copy the settings file out of the bower_components directory. Then you should add bower_components/foundation-sites/scss to your import paths where you compile the SCSS and that will take care of the utils issue. The import path needs to be in the options object inside of the gulp-sass pipe like so:

gulp.task('sass', () => {

    gulp.src('./app/sass/app.scss')
    .pipe(sass({
        includePaths: ['bower_components/foundation-sites/scss']
    }).on('error', sass.logError))
    .pipe(concat('style.css'))
    .pipe(gulp.dest('./app'))
})

When you use the includePaths option, imports will check for files relative to the current directory, followed by files relative to the directories in the includePaths array. @import util/util works after adding bower_components/foundation-sites/scss to the includePaths because the full path is bower_components/foundation-sites/scss/util/_util.scss.