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

Germainegerman

an example is here: stackoverflow.com/documentation/aurelia/1916/aurelia-cli/6256/… – Incredulous

Answer 1

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.

Haletky

Followed the steps outlined in the "Contact Manager Tutorial" or those at "A Library with Additional Resources". I get error "Bootstrap's JavaScript requires jQuery" – Debor

@Debor - Make sure the jQuery version you have installed is the same what your version of Bootstrap requires it to be. For example, try npm install [email protected] --save and restart your application. – Roughneck

This still is a problem for the Contact Manager Tutorial in 2018. – Dodecasyllable

its still alfa? – Discrepancy

Answer 2

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.

Walkyrie

Thanks very much! Strange that aurelia did not catch that in their tutorial. – Goodden

Thanks, this was also the solution to my issue. – Brendin

Answer 3

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.

Cooperative

I've done what you said with no luck, when loading the page in the browser. It will get stuck at DEBUG [templating] importing resources for components/chat.html ["bootstrap/css/bootstrap.css"] & Won't continue loading. I can see bootstrap being injected properly as the JS works. – Beady

Try to remove "js/bootstrap.min.js" from aurelia.json, if it is there. It can make problems. – Cooperative

Step 1 above is missing a closing require tag. It should be: <require from="bootstrap/css/bootstrap.css"></require> – Derek

Answer 4

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.

Honesty

Answer 5

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>

Dodecasyllable

Answer 6

If you are here in July 2019, the answer by @davidjmcclelland is what worked for me. After installing bootstrap, simple include

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

in your app.html. No configurations required.

Behre