Import bootstrap, ng-bootstrap and font-awesome in angular app

Reading Time: < 1 minutes

 128 total views

1) yarn add bootstrap @ng-bootstrap/ng-bootstrap font-awesome

yarn add bootstrap @ng-bootstrap/ng-bootstrap font-awesome

2) In style.scss, import bootstrap and font-awesome

@import "~bootstrap/scss/bootstrap";
$fa-font-path : '../node_modules/font-awesome/fonts';
@import "~font-awesome/scss/font-awesome";

4) type ng serve to launch application in development mode. Index page should open at url http://localhost:4200.

ng serve

Import bootstrap-sass in vuejs

Reading Time: < 1 minutes

 126 total views

1) yarn add bootstrap bootstrap-sass node-sass sass-loader

yarn add boostrap bootstrap-sass node-sass sass-loader

2) Set $icon-font-path to find font files and import variable.scss and _bootstrap.scss

$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
@import "~bootstrap-sass/assets/stylesheets/bootstrap/variables";
@import "~bootstrap-sass/assets/stylesheets/_bootstrap.scss";

3) In main.js, require(‘./assets/sass/main.scss’);
4) type yarn serve to launch application in development mode. Index page should open at url http://localhost:8080.

yarn serve

https://github.com/vuejs-templates/webpack/issues/166

// add any variables you want to override here
// ———
// BOOTSTRAP
// ———
$icon-font-path: ‘~bootstrap-sass/assets/fonts/bootstrap/’;
@import ‘~bootstrap-sass/assets/stylesheets/bootstrap’;