Including bootstrap css in Aurelia

Question

I am new to Aurelia and falling at the first hurdle. I have created a new project using the aurelia cli and have selected to use less.

This works fine until I try to use bootstrap. I have installed bootstrap with npm which appears in node_modules/bootstrap/

This has the directory structure

dist fonts grunt Gruntfile.js js less LICENSE package.json README.md

There are css files in the dist directory.

In my template I do

The error I get is Unhandled rejection Error: Failed loading required CSS file: bootstrap/css/bootstrap.css

How do I tell Aurelia where the bootstrap css files are and how to use them ?

Thanks

Answer 1

I found that I had to change the boostrap css path in app.html to the one expected for Bootstrap 4, per a comment on Aurelia Discourse:

from this:

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

to this:

<require from="bootstrap/dist/css/bootstrap.css"></require>

Answer 2

There is solution for bootstrap downloaded from npm:

1. app.html:

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

2. package.json you have to add:

   "overrides": {
      "npm:jquery@^3.0.0": {
        "format": "amd"
      }
   }
   

3. aurelia.json (aurelia_project folder) you have to add at the end of "app-bundle.js" bundle:

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

It should look like this:

"bundles": [
  {
    "name": "app-bundle.js",
    "source": [
      "[**/*.js]",
      "**/*.{css,html}"
    ],
    "dependencies": [
      "jquery",
      {
        "name": "bootstrap",
        "path": "../node_modules/bootstrap/dist",
        "main": "js/bootstrap.min",
        "deps": ["jquery"],
        "exports": "$",
        "resources": [
          "css/bootstrap.css"
        ]
      }
    ]
  },

It works for me.

Answer 3

I found out one simple thing. Every time you modify aurelia.json file, you need to terminate au run --watch task, a start it again, and it will just work.

I did not find this in documentation.

Hope this helps.

Answer 4

We are still working on the CLI's ability to import libraries into a project and configure them correctly for bundling. Remember, it is an alpha. We will have major improvements coming for this in the future. In the mean time, remember that you can always use traditional techniques for including libraries if you aren't sure what to do. So, I would just include the style tag in your html page and a script tag as well, just pointing at the location for the files in your packages folder.

This is a major use case for us, we just haven't worked out all the library import capabilities yet. We will address this soon.

Answer 5

Using Aurelia CLI

First, install the following in your project:

• au install jquery@2
• au install bootstrap

Second, in aurelia.json add this line in bundles:vendor-bundle.js

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

Then Add the following fonts after dependecies

"copyFiles": {
  "node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.woff2": "bootstrap/fonts",
  "node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.woff": "bootstrap/fonts",
  "node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf": "bootstrap/fonts"
}

Third, After setting import/install. Now you can reference it inside your app.html

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

Or simply add it as a globalResources inside main.ts

aurelia.use
    .standardConfiguration()
      .feature('resources')
      .globalResources('bootstrap/css/bootstrap.css');

For more information on au install/import check it here or adding library in bundles.