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

**URL:** <https://discuss.emberjs.com/t/solved-how-to-create-an-ember-addon-that-provides-a-customizable-bootstrap-theme/12226>\
**Category:** Design\
**Created:** [January 10, 2017, 11:09am UTC](https://discuss.emberjs.com/t/solved-how-to-create-an-ember-addon-that-provides-a-customizable-bootstrap-theme/12226 "2017-01-10T11:09:26Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![roberkules](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/roberkules/32/9722_2.png) [@roberkules](https://discuss.emberjs.com/u/roberkules)\
**Post date:** [January 10, 2017, 11:09am UTC](https://discuss.emberjs.com/t/solved-how-to-create-an-ember-addon-that-provides-a-customizable-bootstrap-theme/12226/1 "2017-01-10T11:09:26Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![roberkules](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/roberkules/32/9722_2.png) [@roberkules](https://discuss.emberjs.com/u/roberkules)\
**Post date:** [January 10, 2017, 3:57pm UTC](https://discuss.emberjs.com/t/solved-how-to-create-an-ember-addon-that-provides-a-customizable-bootstrap-theme/12226/2 "2017-01-10T15:57:37Z")

</div>

_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,
      ],
    },
  };
};

```

---

<div class="post-metadata">

**Author:** ![broerse](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/broerse/32/9497_2.png) [@broerse](https://discuss.emberjs.com/u/broerse)\
**Post date:** [January 10, 2017, 5:39pm UTC](https://discuss.emberjs.com/t/solved-how-to-create-an-ember-addon-that-provides-a-customizable-bootstrap-theme/12226/3 "2017-01-10T17:39:47Z")

</div>

Or use [GitHub - martinic/ember-cli-bootstrap-css: Lightweight addon that only adds bootstrap.css](https://github.com/martinic/ember-cli-bootstrap-css) 🕶

---

<div class="post-metadata">

**Author:** ![roberkules](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/roberkules/32/9722_2.png) [@roberkules](https://discuss.emberjs.com/u/roberkules)\
**Post date:** [January 10, 2017, 5:40pm UTC](https://discuss.emberjs.com/t/solved-how-to-create-an-ember-addon-that-provides-a-customizable-bootstrap-theme/12226/4 "2017-01-10T17:40:57Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![broerse](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/broerse/32/9497_2.png) [@broerse](https://discuss.emberjs.com/u/broerse)\
**Post date:** [January 10, 2017, 6:04pm UTC](https://discuss.emberjs.com/t/solved-how-to-create-an-ember-addon-that-provides-a-customizable-bootstrap-theme/12226/5 "2017-01-10T18:04:11Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![roberkules](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/roberkules/32/9722_2.png) [@roberkules](https://discuss.emberjs.com/u/roberkules)\
**Post date:** [January 10, 2017, 6:07pm UTC](https://discuss.emberjs.com/t/solved-how-to-create-an-ember-addon-that-provides-a-customizable-bootstrap-theme/12226/6 "2017-01-10T18:07:25Z")

</div>

> [@broerse](#):
>
> Could make parallel version upgrades for 3 and 4.

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)

---

<div class="post-metadata">

**Author:** ![dnix](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/dnix/32/12889_2.png) [@dnix](https://discuss.emberjs.com/u/dnix)\
**Post date:** [February 1, 2017, 9:41pm UTC](https://discuss.emberjs.com/t/solved-how-to-create-an-ember-addon-that-provides-a-customizable-bootstrap-theme/12226/7 "2017-02-01T21:41:50Z")

</div>

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](https://github.com/kaliber5/ember-bootstrap/pull/206)