Well, like I mentioned in the last post, ember-cli is under heavy development and is progressing quickly. In the few days since I wrote the last post version 0.0.27 of ember-cli has been released and the process for including bootstrap-sass is much easier.

If you're interested in using bootstrap-sass-official in a brand new ember-cli app you can jump down to the new project section.

Upgrade ember-cli

Let's start with the repo that we ended with in the last post. First we can change to that directory and install the latest version of ember-cli.

$ cd ember-cli-bootstrap-sas
$ npm install ember-cli --save-dev

Now we can just re-init ember-cli over the top of the existing directory. It will regenerate the scaffold files and allow you to choose wheter to overwrite the old files or not. Since this is a small repo I just let ember-cli replace everyting.

$ ember-cli init

Reinstall broccoli-sass & bootstrap-sass-official

Running ember-cli init overwrote bower.json and package.json, so we need to reinstall bootstrap-sass-official and broccoli-sass.

$ bower install --save bootstrap-sass-official
$ npm install --save-dev broccoli-sass

No more ugly hacks

In the last post we ended up with our application css living in app.custom_scss to prevent ember-cli from automatically compiling the file without the correct bootstrap mixins. We don't need that anymore, so we can rename that file to app.scss. We can also remove the 'app.css' file that ember-cli generated when we ran init again.

$ mv app/styles/app.custom_scss app/styles/app.scss
$ rm app/styles/app.css

Fix the bootstrap import

At this point running ember-build will fail with an error saying that 'bootstrap' can not be found for import.

$ ember build
version: 0.0.27
Build failed.
Error: /Users/jgreen/Desktop/rails_projects/ember-cli-bootstrap-sass/tmp/tree_merger-tmp_dest_dir-umLYFxlS.tmp//app.scss:1: error: file to import not found or unreadable: 'bootstrap'
... 

That's becaus the sass compiler doesn't know where to find bootstrap.scss. We can fix that by changing the @import statement in app.scss.

@import 'vendor/bootstrap-sass-official/assets/stylesheets/bootstrap';

That's it! We're all finished.

For a new project

If you want to use bootstrap-sass-official in a new ember-cli project, here is the quick version of what you'd need to do.

$ ember new my-new-project
$ cd my-new-project
$ bower install --save bootstrap-sass-official
$ npm install --save-dev broccoli-sass
$ mv app/styles/app.css app/styles/app.scss

Then edit app/styles/app.scss and add the import statement:

@import 'vendor/bootstrap-sass-official/assets/stylesheets/bootstrap';

Thanks

Thanks to Stefan Penner and the rest of the ember-cli team for all the work on this great tool. Also, thanks to MajorBreakfast for pointing me in the right direction.

UPDATE : Glyphicons

Be sure to check this follow up post to see how to get the glyphicons working.

UPDATE II : Path

UPDATE : The format of the bootstrap-sass-official package has changed.

At the time this post was originally written @import statement was for vendor/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap. It has been updated to vendor/bootstrap-sass-official/assets/stylesheets/bootstrap in order to match the new format of the package.