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.

HeroicEric · Accepted Answer · 2014-10-01T16:03:47.937

13

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

edited Oct 01 '14 at 16:03

answered Aug 11 '14 at 18:20

HeroicEric

876
5
13

Thank-you! That worked perfectly. To get the settings to work from within the `app/styles` directory I had to edit the import of the functions component on line 41 to the full vendor directory. – Jacob Windsor Aug 12 '14 at 09:51
2

ember-cli recently switched from `vendor` to `bower_components` to install bower components. Therefor the path for `@import` should be updated accordingly. – bazzel Sep 16 '14 at 16:53
Thanks @bazzel. I'm not sure why your edit suggestion was being rejected. I updated the original answer. – HeroicEric Oct 01 '14 at 16:04

score 3 · Answer 2 · answered Sep 17 '14 at 13:15

3

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!

answered Sep 17 '14 at 13:15

codepreneur

466
6
19

score 1 · Answer 3 · answered Sep 20 '15 at 04:42

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'

score 0 · Answer 4 · answered Sep 27 '14 at 10:13

0

This is worked for me well! Just install following package,

npm install --save-dev ember-cli-foundation

answered Sep 27 '14 at 10:13

Kannan S

2,459
1
17
17

Install Foundation 5 in ember-cli

4 Answers4

Linked