How to use ember-bootstrap in an ember-cli addon?

I am using ember-cli-sass and tried to import ember-bootstrap as @import “ember-bootstrap/bootstrap”. But it produced error Error: File to import not found or unreadable: ember-bootstrap/bootstrap. Any idea to solve this?

have you read “Addon Usage” and “Alternative Addon Usage” ?

1 Like

Take a look at ember-bootstrap add-on. Just follow the steps to install it and it should work. Another way is to use a ‘standard’ way: install it with yarn, npm or bower depending on what your app uses. Then add it by importing in ember-cli-build.js as follows:

app.import('bower_components/bootstrap/dist/css/bootstrap.css'); 
app.import('bower_components/bootstrap/dist/css/bootstrap.css.map', {
  destDir: 'assets' 
});

Adapt the path to your css depending on where your build tool put imported packages. Just one note, using this way can bring some issues when using Bootstrap JS libraries (like drop-downs for example or others). So if you are going to use them, it is worth to use ember-bootstrap add-on which replaces all the bootstrap tags with its own ones, - you should ue them in hbs templates.

1 Like