CODEWITHSUNDEEP
cssember.jssasscompass-sass
Jacob Windsor
Jacob Windsor

Reputation: 6980

Install Foundation 5 in ember-cli

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.

Upvotes: 5

Views: 2334

Answers (4)

Suhas
Suhas

Reputation: 8458

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'

Upvotes: 1

HeroicEric
HeroicEric

Reputation: 876

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

Upvotes: 13

Kannan S
Kannan S

Reputation: 2489

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

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

Upvotes: 0

codepreneur
codepreneur

Reputation: 466

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!

Upvotes: 3

Related Questions