So you’ve used the Aurelia CLI to bootstrap your awesome Aurelia app and you npm install some dependencies, let’s say bootstrap and jquery:

npm i bootstrap 
npm i jqeury

Ok, ready to rock. Next, you update your aurelia.json file with the new dependencies:

"jquery",
{
  "name": "bootstrap",
  "path": "../node_modules/bootstrap/dist",
  "main": "js/bootstrap.min",
  "deps": ["jquery"],
  "exports": "$"
}

Sweet.

Next up is to import bootstrap into your main module, so that you can require it in your templates:

import 'bootstrap';

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .feature('resources');

  aurelia.start().then(() => aurelia.setRoot());
}

Amazeballs.

So, you require your bootstrap css in your app template:

<template>
  <require from="bootstrap/css/bootstrap.css"></require>
  <require from="./styles.css"></require>

  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <i class="fa fa-user"></i>
        <span>Contacts</span>
      </a>
    </div>
  </nav>

  <div class="container">
    <div class="row">
      <div class="col-md-4">Contact List Placeholder</div>
      <router-view class="col-md-8"></router-view>
    </div>
  </div>
</template>

But, what’s this??? You get this error in the console:

WTF is going on there? Hmmm… Let’s review that dependency configuration we added to aurelia.json…

Oooh, we left out the css resources:

{
  "name": "bootstrap",
  "path": "../node_modules/bootstrap/dist",
  "main": "js/bootstrap.min",
  "deps": ["jquery"],
  "exports": "$",
  "resources": [
    "css/bootstrap.css"
  ]
}

And now it works.