Sunday 18 September 2016

How to use Bootstrap CSS with Webpack in Angular 2 Seed Project?

Being highly experienced Java architect-cum-programmer, having just fundamental knowledge of front-end technologies (i.e. HTML, CSS, JavaScript, jQuery, Jasmine, Bower, Grunt, Node.js, etc.), arbitrarily I thought to get my hands dirty with Angular (so called Angular 2.0 at present) and Bootstrap @ https://github.com/tirthalpatel/Learning-FET/tree/master/gs-angular/gs-angular2-app.

After going through Angular Architecture Overview, I thought to give it a try with Bootstrap CSS. So I decided to take "angular2-seed" project and start from there. This decision really enabled me to play with few Angular syntax and fundamentals quickly. However, a real struggle started, when it came to incorporate Bootstrap CSS into the project. Firstly, I just added bootstrap css {<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">} in index.html as per traditional approach and it didn't work.  After spending few hours, I could realize Angular 2 seed project uses Webpack. Then, google helped me to find how to use Bootstrap (CSS only) and Webpack! Finally, I could incorporate Bootstrap CSS in Angular 2 seed project with further trail-and-error approach as per below steps.

(1) package.json: added bootstrap, babel-core, babel-loader, css-loader, file-loader, style-loader and url-loader dependencies

(2) webpack.config.js: added loaders configuration in module of webpackConfig

(3) app.ts: imported bootstrap.css



A POC project of Angular 2 + Webpack + Bootstrap CSS




A demo project for getting started with Angular 2 and trying its numerous features



Refer README file for instructions of running Angular app.

No comments:

Post a Comment