I am fairly new to ember and very new to the build tools. I am currently using the usual foundation install with the foundation cli and compass to compile my css, this is a bit of a pain and is very bad for working on a team. I thought it would be better to install the files with bower and use ember-cli-compass-compiler as stated in the docs but its not working as expected. I would like to have the app.scss file in the app/styles directory and import all the required foundation components within that file. I would also like to keep the _settings.scss component within the app/styles directory so it can be easily shared.
E.g
@import "settings";
@import "vendor/foundation/scss/foundation";
However this gives me the error File to import not found or unreadable: vendor/foundation/scss/foundation.
I can assure you that the foundation.scss file in the vendor directory does exist. I have also tried importing the file using app.import() in the Brocfile.js but with no avail.
If you want to use the .scss version of Foundation, you should first configure your project to use broccoli-sass with:
npm install --save-dev broccoli-sass
and then rename your app/styles/app.css to app/styles/app.scss.
Then you can install Foundation using Bower with:
bower install --save-dev foundation
Now, inside your app/styles/app.scss, you can import the Foundation styles with:
@import 'bower_components/foundation/scss/normalize';
@import 'bower_components/foundation/scss/foundation';