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

Design
1

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: [
    'bower_components/bootstrap/scss',
  ],
},

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!

2

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: [
        bootstrapPath,
      ],
    },
  };
};
3

Or use GitHub - martinic/ember-cli-bootstrap-css: Lightweight addon that only adds bootstrap.css :sunglasses:

4

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

5

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

1 Like
6

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)

7

FYI to anyone still following this… there is active work going on to bring BS4 to ember-bootstrap https://github.com/kaliber5/ember-bootstrap/pull/206