bootstrap is not included in yeoman fountain webapp

Question

I am having issue with bootstrap less to include in yeoman fountain webapp. I have installed the bootstrap inside yeoman folder with below command bower install --save angular-bootstrap. it's installed but when I use any component or CSS class from bootstrap showing a basic html element. I have included into modules as like angular .module('myModule', ['ui.router','ngSanitize','ui.bootstrap']); and i have updated in bower.json as like below

 {
  "name": "appName",
  "version": "0.0.1",
  "dependencies": {
    "angular": "~1.6.4",
    "angular-ui-router": "~1.0.0-beta.3",
    "angular-sanitize": "~1.6.4",
    "angular-bootstrap": "^2.5.0"
  },
  "devDependencies": {
    "angular-mocks": "~1.6.4"
  },
  "resolutions": {
    "angular": "~1.6.4"
  },
  "overrides":{
    "bootstrap" : {
         "main": [
            "less/bootstrap.less",
            "dist/css/bootstrap.css",
            "dist/js/bootstrap.js"
          ]
    }
  }
}

The only way I found to add the stylesheet is to input @import "../../bower_components/pathOftheFile" in the index.scss file. But I think it is not a good practice to do it that way.Please anyone suggest a solution to add bootstrap into my code.

Thanks,