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.
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
ember-cli init overwrote
package.json, so we need to reinstall
$ bower install --save bootstrap-sass-official $ npm install --save-dev broccoli-sass
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
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
That's it! We're all finished.
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
app/styles/app.scss and add the
Be sure to check this follow up post to see how to get the glyphicons working.
UPDATE : The format of the
bootstrap-sass-official package has changed.
At the time this post was originally written
@import statement was for
has been updated to
in order to match the new format of the package.