Getting Zurb Foundation SASS to Play Nice With Existing Application - sass

Question

I've got an existing NodeJS express / AngularJS application that I need to make play nicely with Zurb foundation and in particular I am having problems with SASS.
The application was initially created with the yeoman angular generator.
I have installed zurb foundation via bower and the css side of things works fine. I can't however get the sass to compile properly. I seem to end up with missing parts of the css so there's virtually no styling present. The stylesheet is injected etc. and there's no errors as such when I build it.
My gruntfile looks like this (consolidated).
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
yeoman: {
client: require('./bower.json').appPath || 'client',
dist: 'dist'
},
express: {
...
},
watch: {
injectJS: {
files: [
'<%= yeoman.client %>/{app,components}/**/*.js',
'!<%= yeoman.client %>/{app,components}/**/*.spec.js',
'!<%= yeoman.client %>/{app,components}/**/*.mock.js',
'!<%= yeoman.client %>/app/app.js'],
tasks: ['injector:scripts']
},
injectCss: {
files: [
'<%= yeoman.client %>/{app,components}/**/*.css'],
tasks: ['injector:css']
},
injectSass: {
files: [
'<%= yeoman.client %>/{app,components}/**/*.{scss,sass}'],
tasks: ['injector:sass']
},
sass: {
files: [
'<%= yeoman.client %>/{app,components}/**/*.{scss,sass}'],
tasks: ['sass', 'autoprefixer']
},
gruntfile: {
files: ['Gruntfile.js']
},
},
sass: {
server: {
options: {
loadPath: [
'<%= yeoman.client %>/bower_components/foundation/scss',
'<%= yeoman.client %>/bower_components',
'<%= yeoman.client %>/app',
'<%= yeoman.client %>/components'
],
compass: false
},
files: {
'.tmp/app/app.css' : '<%= yeoman.client %>/app/app.scss'
}
}
},
injector: {
scripts: {
...
},
sass: {
options: {
transform: function(filePath) {
filePath = filePath.replace('/client/app/', '');
filePath = filePath.replace('/client/components/', '');
return '#import \'' + filePath + '\';';
},
starttag: '// injector',
endtag: '// endinjector'
},
files: {
'<%= yeoman.client %>/app/app.scss': [
'<%= yeoman.client %>/{app,components}/**/*.{scss,sass}',
'!<%= yeoman.client %>/app/app.{scss,sass}'
]
}
},
// Inject component css into index.html
css: {
options: {
transform: function(filePath) {
filePath = filePath.replace('/client/', '');
filePath = filePath.replace('/.tmp/', '');
return '<link rel="stylesheet" href="' + filePath + '">';
},
starttag: '<!-- injector:css -->',
endtag: '<!-- endinjector -->'
},
files: {
'<%= yeoman.client %>/index.html': [
'<%= yeoman.client %>/{app,components}/**/*.css'
]
}
}
}
...
In my app.scss I just have this:
#import 'settings';
#import 'foundation';
And the _settings file is from the stock Zurb git repo and works without the rest of my application.
When it compiles, I get some css starting with this:
/* Accessibility - hides the forward slash */
[aria-label="breadcrumbs"] [aria-hidden="true"]:after {
content: "/"; }
.icon-bar.two-up .item {
width: 50%; }
.icon-bar.two-up.vertical .item, .icon-bar.two-up.small-vertical .item {
width: auto; }
#media only screen and (min-width: 40.063em) {
.icon-bar.two-up.medium-vertical .item {
width: auto; } }
#media only screen and (min-width: 64.063em) {
.icon-bar.two-up.large-vertical .item {
width: auto; } }
.icon-bar.three-up .item {
width: 33.3333%; }
.icon-bar.three-up.vertical .item, .icon-bar.three-up.small-vertical .item {
width: auto; }
#media only screen and (min-width: 40.063em) {
.icon-bar.three-up.medium-vertical .item {
width: auto; } }
#media only screen and (min-width: 64.063em) {
.icon-bar.three-up.large-vertical .item {
width: auto; } }
.icon-bar.four-up .item {
width: 25%; }
.icon-bar.four-up.vertical .item, .icon-bar.four-up.small-vertical .item {
width: auto; }
#media only screen and (min-width: 40.063em) {
.icon-bar.four-up.medium-vertical .item {
width: auto; } }
#media only screen and (min-width: 64.063em) {
.icon-bar.four-up.large-vertical .item {
width: auto; } }
.icon-bar.five-up .item {
width: 20%; }
.icon-bar.five-up.vertical .item, .icon-bar.five-up.small-vertical .item {
width: auto; }
I'm just learning sass and could do with some pointers. Could someone please help get this working