Solved: How to create an Ember Addon that provides a customizable bootstrap theme


I created an Ember Addon that basically contains CSS that we want to share across projects.

The first step works: creating a ember addon with SCSS and then being able to import that SCSS in my apps stylesheet using npm link & ember install (so we’re still able to update certain rules)

But now I’m trying to add Bootstrap (v4 beta) to the Addon using bower, but I don’t know where to add this part:

sassOptions: {
  includePaths: [

I tried ember-cli-build, index.js and config/environment.js, but once I add @import "bootstrap" I get those results:

when adding to ember-cli-build.js:

File: /…/tmp/sass_compiler-input_base_path-aGuL5bPv.tmp/app/styles/my-addon.scss (1) The Broccoli Plugin: [SassCompiler] failed with: Error: File to import not found or unreadable: bootstrap.

when adding to environment.js:

The Broccoli Plugin: [SassCompiler] failed with: Error: Attempting to watch missing directory: bower_components/bootstrap/scss

Any help appreciated, thanks!


environment.js seems to be the right place:

module.exports = function(environment, appConfig) {

  var bootstrapPath = require('path').join(__dirname, '..', 'bower_components', 'bootstrap', 'scss');

  return {
    sassOptions: {
      includePaths: [


Or use :sunglasses:


i’m trying out bootstrap v4 … living on the edge


Alpha is to much on the edge for me. Could make parallel version upgrades for 3 and 4. Have to think about this.


We just started working on a ember app that we plan to release early May, thought we’ll give it a shot, if it turns out to be too buggy we should be able to migrate back to v3 (then I’ll be more than happy to use the addon)


FYI to anyone still following this… there is active work going on to bring BS4 to ember-bootstrap