Install Foundation 5 in ember-cli

Question

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.

Answer 1

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';

Answer 2

Just recently released ember-cli addon for foundation

Here: https://github.com/artificialio/ember-cli-foundation-sass

and here: https://www.npmjs.org/package/ember-cli-foundation-sass.

Hope it helps!

Answer 3

The accepted answer did not work for me. If that is the case for any other developers then this answer might help.

First, install ember-cli-sass addon

npm install --save-dev ember-cli-sass

Next, install foundation

bower install --save-dev foundation

At this point you might want to rename your app.css to either app.scss or app.sass.

Next, tell ember cli to include the foundation Sass files just installed in the asset pipeline building process. Add the following code in ember-cli-build.js

var app = new EmberApp({
  sassOptions: {
    includePaths: [
      'bower_components/foundation/scss'
    ]
  }
});

In your app.scss file, import foundation using the following line of code

@import 'foundation'; 

If you do not want to import all of foundation but bits of it, then you can do so by importing the appropriate component e.g. @import 'foundation/fuctions'