Search code examples
twitter-bootstrapember.jsbowerember-cli

How to integrate Twitter Bootstrap into an ember-cli app?


I am using Ember 1.7.0 and trying to integrate the Twitter Bootstrap CSS Framework into an ember-cli app.

I have seen some articles about this online, but most seem to be pretty outdated. As of today, I've managed to put information from articles online together and have come up with this.

bower install --save bootstrap-sass-official

Then check bower.json to see if something along the lines is included:

"bootstrap-sass-official": "~3.3.1"

Include the following lines in your Brocfile.js:

app.import('bower_components/bootstrap-sass-official/assets/javascripts/bootstrap.js');
app.import('bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss');

Restart ember-server. Navigate to http://localhost:4200/assets/vendor.js. See that Twitter Bootstrap source code is in there.

However, at http://localhost:4200/assets/vendor.css, I don't see any indication....

Is this the right way to install? Am I missing something?


Solution

  • bootstrap-for-ember has been deprecated, which means you shouldn't use ember-cli-bootstrap-sass for new projects either since that utilizes bootstrap-for-ember. Therefore, with ember-cli v0.1.12, I'm using ember-cli-bootstrap-sassy, which is described as "a fork of ember-cli-bootstrap-sass but without any dependencies on the now defunct bootstrap-for-ember."

    To install ember-cli-bootstrap-sassy, run the following command from the root of your ember-cli project directory:

    $ ember install:addon ember-cli-bootstrap-sassy