Search code examples
twitter-bootstrapbootstrap-4aurelia

How to Include Bootstrap 4.0 in an Aurelia project using Aurelia CLI 0.33 and Webpack


I was confused how to make Bootstrap 4 run into my Aurelia web app. On our past projects we used RequireJS as our bundler but now with the new update of Aurelia CLI which is version 0.33.1 which uses WebPack.

Anybody who has the chronological steps on how to install it then use it on our view using require...?

Thank you so much.


Solution

  • install it:

    yarn add bootstrap jquery popper.js
    

    import it:

    import 'bootstrap';
    import 'bootstrap/dist/css/bootstrap.css';
    

    use it:

    import 'bootstrap';
    import 'bootstrap/dist/css/bootstrap.css';
    import $ from 'jquery';
    
    export class App {
      attached() {
        $('[data-toggle="tooltip"]').tooltip();
      }
    }
    

    if you don't wanna import jquery each time but rather use it as a global, modify webpack.config.js:

    new ProvidePlugin({
        ...,
        $: 'jquery'
    }),