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;

Colin Marshall · Accepted Answer · 2016-02-18T00:34:27.260

3

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.

edited Feb 18 '16 at 00:34

answered Feb 17 '16 at 20:27

Colin Marshall

2,142
2
21
31

thanks colin, i have added some code to the question .. i also tried adding 'bower_components/foundation-sites/scss' separately to my gulp task, but the problem seems to be that in the settings file, it directly uses '@import utils/utils' – sarincasm Feb 17 '16 at 23:42
And btw, your `concat` pipe is useless because your source is one file so there's no files to join together. Everything is imported in the sass. – Colin Marshall Feb 18 '16 at 00:49
thanks.. this works perfectly.. is this a standard way of including bower components, so if i include another component that uses sass, i just add its path to the `includePaths` property to resolve dependencies? (i had added that concat pipe to include foundation there as well, but i guess it is useless now .. thanks for the heads up ) – sarincasm Feb 18 '16 at 01:06
Yes, you can include other components by adding it to the `includePaths` array. It saves a good amount of code because you don't need to include the path in your `@import` statement. – Colin Marshall Feb 18 '16 at 02:31

score 1 · Answer 2 · answered Apr 30 '17 at 19:06

Easier:

Move the default bower_components/foundation-sites/scss/settings/_settings.scss file into your own project styles.
Edit _settings.scss file to your liking.
Go to bower_components/foundation-sites/scss/foundation.scss file:

Replace:

// Settings
// import your own `settings` here or
// import and modify the default settings through
// @import 'settings';

With:

// Settings
// import your own `settings` here or
// import and modify the default settings through
@import 'your_own/project/styles/path/settings';

Make sure foundation is being imported on your styles:

@import "bower_components/foundation-sites/scss/foundation.scss";

Voilà!

Correct Way to customize zurb foundation 6 with bower

2 Answers2