Preferred way of using Bootstrap in Webpack

Question

Greetings one and all,

I have been playing around with Bootstrap for Webpack, but I\'m at the point of tearing my hair out. I have literally gone through loads of bl

Answer 1

I am not sure if this is the best way, but following work for me well with vue.js webapp. You can see the working code here.

I have included files required by bootstrap in index.html like this:

And this works, you can execute the repo. Why I went this way was I had to customise some config in bootstrap so I had to change the variables file and build the code of bootstrap which outputted me bootstrap.js and bootstrap.cssfiles, which I am using here.

---

There is an alternative way suggested here by using the npm package and a webpack customisation.

First install bootstrap in your project:

npm install bootstrap@4.0.0-alpha.5

And make sure you can use sass-loader in your components:

npm install sass-loader node-sass --save-dev

now go to your webpack config file and add a sassLoader object with the following:

sassLoader: {
    includePaths: [
        path.resolve(projectRoot, 'node_modules/bootstrap/scss/'),
    ],
},

projectRoot should just point to where you can navigate to node_packages from, in my case this is: path.resolve(__dirname, '../')

Now you can use bootstrap directly in your .vue files and webpack will compile it for you when you add the following: