Including bootstrap css in Aurelia

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.

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.

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.