This post is a response to a comment from the Ember.js Wysiwyg Summernote post. Working with vendor libraries and ES6 modules and a build system like Broccoli should be relatively straight forward, and often is, but there are some gaps still.
I chose to stick to vanilla Bootstrap for this solution. There are a few packaged modules out there specifically for Ember-CLI but I have yet to find one that just works. This walkthrough will actually get Sass and Bootstrap-Sass working together. I’ll also explain how to get the default Bootstrap Glyphicons pack working as well as how to add the FontAwesome icon pack.
The first thing to do is create a new Ember-CLI application for this demonstration. If you already have a working Ember-CLI application, you can forgo this step.
$ ember new ember-cli-bootstrap-example $ cd ember-cli-bootstrap-example
You may notice that running
ember new takes care of the
npm install and
bower install steps.
Using Sass in place of CSS is extremely easy with the help of joliss/broccoli-sass. This is one of the many plugins for Broccoli that Jo Liss has created, in addition to the work put towards Broccoli itself. This will also be necessary so that the
bootstrap-official-sass package can work.
Once the install completes, be sure to rename the default
app/styles/app.css file to
app/styles/app.scss. If the server is running it will throw an error, simply restart the server.
$ npm install --save broccoli-sass $ mv app/styles/app.css app/styles/app.scss
This example will use the
bootstrap-sass-official Bower package. To get Glyphicons working we will need to also add another Broccoli plugin for static asset compilation called
$ bower install --save bootstrap-sass-official $ npm install --save broccoli-static-compiler
That is all of the dependencies.
Include the Bootstrap styles in your application by adding an
@import line to your
Now, to get the Glyphicons working the font assets need to be moved into the
dist/fonts directory. This can be configured inside the
Brocfile.js by using the module
broccoli-static-compiler. This module will take all of the font files and move them into
Since the first argument, the tree, is the direct location of the Bootstrap Glyphicon fonts the
srcDir is just the root of this tree. Broccoli builds everything into the
dist directory so we don’t need to preface the
destDir with this value.
It is important to note the addition of
bootstrapFonts on line 14. Ember-CLI provides the
toTree() method which can take any number of trees to be merged into your app tree. The argument passed into toTree must be a single tree or an array of trees.
A lot of people prefer FontAwesome over Glyphicons. They do provide more options than the Glyphicon pack for Bootstrap. I especially like their social icons. Using FontAwesome instead of Glyphicon is actually simpiler than getting Glyphicon to work. All that is needed is to install the Bower package and add the
@import statement to
$ bower install --save fontawesome
In response to the aforementioned comment I created an example repository with Ember-CLI, Bootstrap, Sass, Fontawesome, and Summernote which can be found at hbrysiewicz/ember-cli-summernote.
I realized when writing this blog post that the Ember-CLI Version for that project was
0.0.46 which is a bit old. For this example I used version
0.1.1 which is the newest at time of writing. It can be found at hbrysiewicz/ember-cli-bootstrap-example