Menu icon Foundation
Custom scss file imports?

I'm using the new Foundation 6 CLI - Zurb template that includes the Gulp workflow, and I cannot figure out how to add custom scss files. The Gulp file shows the SASS paths to be -

sass: [
'bower_components/foundation-sites/scss',
'bower_components/motion-ui/src/'
],

- but those are for the framework and not the project itself. I've tried the following, but everything results in my outputted app.css file returning an error after compiling.

After adding @import 'homepage'; to the bottom / top / everywhere in src/assets/scss/app.scss, I ...

1. Added my scss files to bower_components/foundation-sites/scss
2. Added my scss files to the project scss folder - src/assets/scss and modified my SASS Gulp block to include the path:

sass: [
'bower_components/foundation-sites/scss',
'bower_components/motion-ui/src/',
'src/assets/scss/**/*.scss'
],

This is my first time using Gulp after using Grunt for the past two years, so I'm sure I'm overlooking some nuance here. Any help is appreciated!

scsssitesfoundation 6

I'm using the new Foundation 6 CLI - Zurb template that includes the Gulp workflow, and I cannot figure out how to add custom scss files. The Gulp file shows the SASS paths to be -

sass: [
'bower_components/foundation-sites/scss',
'bower_components/motion-ui/src/'
],

- but those are for the framework and not the project itself. I've tried the following, but everything results in my outputted app.css file returning an error after compiling.

After adding @import 'homepage'; to the bottom / top / everywhere in src/assets/scss/app.scss, I ...

1. Added my scss files to bower_components/foundation-sites/scss
2. Added my scss files to the project scss folder - src/assets/scss and modified my SASS Gulp block to include the path:

sass: [
'bower_components/foundation-sites/scss',
'bower_components/motion-ui/src/',
'src/assets/scss/**/*.scss'
],

This is my first time using Gulp after using Grunt for the past two years, so I'm sure I'm overlooking some nuance here. Any help is appreciated!

This post has been closed. No new replies can be added.

Tommy McGahee almost 4 years ago

Nevermind, it looks like adding the new path in the SASS block is working. I didn't see the SASS errors in terminal before and it looks like the issue is due to the new way F6 handles media queries.