If your Ember application is using pure CSS or LESS, than this addon is NOT for you.
What Does This Addon Do?
This addon will make sure that the latest version of the
ember-cli-sass Ember Addon is
installed in your Ember-App. In addition, the latest version of the
bootstrap-sass library from
assets directory and are then referred to from the
- Ember >= 1.13.0
- Ember CLI
Installation is basically two simple steps: one install the addon,
and two import the SASS source into your
The following will install this addon along with the bootstrap-sass source and fonts:
$ ember install ember-cli-bootstrap3-sass
Next, inside your
app/styles/app.scss file you must compile the
bootstrap source into your application's stylesheet:
// `app/styles/app.scss` ... @import 'ember-cli-bootstrap3-sass'; ...
Alternate Bootstrap Theme With Fancier Buttons?
Access to Bootstrap's alternate theme is as simple as adding one
ember-cli-bootstrap3-theme. So your
app/styles/app.scss should look like this:
// `app/styles/app.scss` ... @import 'ember-cli-bootstrap3-sass'; @import 'ember-cli-bootstrap3-theme'; ...
So it should go without saying, if you want to include some other canned theme from bower or wherever, you can include it just after the aforementioned import(s).
Bootstrap Variables & Mixins Convenience Importer
Sometimes you need access to the default Bootstrap variables or you require Bootstrap's mixins to generate prior to your loading of the full bootstrap suite. I've included both convenience imports to this addon.
// `app/styles/app.scss` ... @import 'ember-cli-bootstrap3-variables'; ...
The bootstrap variables will now be available for you to override or re-use in whatever way you see fit.
// `app/styles/app.scss` ... @import 'ember-cli-bootstrap3-mixins'; ...
The bootstrap mixins will be available once this has been imported.
Alternate Glyphicon Font Path?
By default, this addon takes care of the Glyphicon font paths for you.
If for some reason you need to customize this path, you can do so
by supplying the
$icon-font-path variable value before you import
ember-cli-bootstrap3-sass. Make sure the path you specify includes
the trailing slash!
// `app/styles/app.scss` ... $icon-font-path: '/some/absolute/path/' @import 'ember-cli-bootstrap3-sass'; ...
If you want to upgrade this addon at any time, simply invoke
ember install ember-cli-bootstrap3-sass command.
When working through the Ember-CLI upgrade process, I again recommend
ember install ember-cli-bootstrap3-sass command to get
the latest version of the addon. Notice that this may update the
bootstrap-sass bower dependency to the latest 3.x.x version.
Troubleshooting And Tips
- You need
ember-cli-sassto be configured in your application. This means that by default your styles have been compiled inside your
app/styles/app.scssfile. If you've adjusted the configuration to use a different file, then you must add the
@import 'ember-cli-bootstrap3-sass'directive there.
- As bootstrap-3 version updates are made available, simply reinstall your
bower packages and in some cases update your
bower.jsonto ensure the version you want is being brought into your application. Understand that this addon does not entertain installing bootstrap-4 at this time.
Ember Addon Building And Testing
git clone email@example.com:cybertoothca/ember-cli-bootstrap3-sass.git
Running The Dummy Application
- Visit your app at http://localhost:4200.
Running Addon Tests
ember try:testallto test your addon against multiple Ember versions)
ember test --server
Building The Addon
For more information on using ember-cli, visit http://ember-cli.com/.
Linking This Addon For Local Testing
- From the command line at the root of this project run the
npm linkcommand to link this addon within your local node repository.
- From the other Ember project that you wish to test this addon
in, execute the following command:
npm link ember-cli-bootstrap3-sass.
- Now in that same other Ember project, you should go into the
package.jsonand add the ember addon with the version *. It will look something like this:
"ember-cli-bootstrap3-sass": "*". Now when/if you execute
npm installon this other project it will know to look for the linked addon rather than fetch it from the central repository.
- Remove the addon from your local node repository with the following
command (that can be run anywhere):
npm uninstall -g ember-cli-bootstrap3-sass
- Remove the reference to the
ember-cli-bootstrap3-sassin your other project's
- Run an
npm prunefrom the root of your other project's command line.