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?

回答1:

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

回答2:

If you already have a customized Bootstrap version, say from getbootstrap.com/customize/

First download and unzip to the vendor/ folder and then do something like this in your Brocfile:

// Bootstrap
app.import({
  development: 'vendor/bootstrap/css/bootstrap-theme.css',
  production: 'vendor/bootstrap/css/bootstrap-theme.min.css'
});

app.import({
  development: 'vendor/bootstrap/css/bootstrap.css',
  production: 'vendor/bootstrap/css/bootstrap.min.css'
});

回答3:

There are many ways of doing it.

Currently, what I do is:

npm install --save-dev ember-cli-bootstrap

And you are done.

Note that the add-on allows you to pass configuration options to Bootstrap. Project page: ember-cli-bootstrap

来源：https://stackoverflow.com/questions/27090873/how-to-integrate-twitter-bootstrap-into-an-ember-cli-app

标签

twitter-bootstrap

ember.js

bower

ember-cli