How To Import Bootstrap Using Webpack
Last days, I was looking for the best practice to import bootstrap into a webpack — sass project. There are several ways to do that, let’s take a look.
1- Using Static Html File
That is the ugliest and easiest way I assume. You can use anyway but you have to be careful when you need change the environment. Because the url is static.
2- Using Html Webpack Plugin
You know you can write custom html templates using html webpack plugin. That looks better, bootstrap path is dynamic now and depends on the environment config. But you must agree, it is still ugly and not satisfying.
3- Using npm and Import at Index.js
When I googled about the problem, I’ve found a solution at https://github.com/AngularClass/angular-starter/issues/696 comments, advises to install bootstrap package with npm.
npm install bootstrap --save
That was almost perfect. Do you have any idea why I said almost ? The answer is on your dom element inspector. After build the application and open the element inspector on your browser, you will see something like this:
As you can see, the bootstrap source has been injected to html dom. Which means you have an huge inline <style> tag on your page. And the worse, it comes just after the bundled css. So every single style rule could be overwritten by bootstrap and you can’t handle it.
4- Using npm and Import at Index.scss
It is obvious we must add the bootstrap file into our bundled css. And I’ve chosen to import it from scss file. If you planning to use only css but js of bootstrap, that could be useful.
npm install bootstrap --save
I hope that was helpful. If you have any idea for the best practice, please don’t hesitate to comment !
