I've been struggling to integrate Foundation into my Ember-CLI app using broccoli-scss for compiling all the SCSS files. Despite following the structure from the broccoli sample app, I just can't seem to get it working.
My approach involves having Foundation installed in my bower components and here's what I have attempted so far:
// Brocfile.js
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var pickFiles = require('broccoli-static-compiler')
var compileSass = require('broccoli-sass');
var app = new EmberApp();
var styles = 'styles'
styles = pickFiles(styles, {
srcDir: './bower_components/foundation/scss',
destDir: './app/styles'
});
var appsScss = compileSass([styles], './app/styles/app.scss', './app/styles/app.css');
module.exports = app.toTree();
Additionally, here is a snippet of my app/styles/app.scss file:
// app/styles/app.scss
@import "../../bower_components/foundation/scss/normalize";
@import "../../bower_components/foundation/scss/foundation.scss";
However, upon inspecting the browser, I noticed that only around 800 lines of CSS were being compiled, whereas the standard foundation.css file contains about 4.4k lines. It's clear that something is amiss with my configuration.
If anyone has any insights or solutions to offer, I'd greatly appreciate it. Thank you.