Grunt Wiredep not injecting bootstrap css files in Yeoman Angular Tutorial

Question

I'm going through the tutorial on setting up an AngularJS app using Yeoman (http://yeoman.io/codelab.html), and Bootstrap's CSS files are not getting included in the index.html file. So when I run grunt serve, the page is missing all the Bootstrap styles, unlike whats shown in the tutorial image.

The Bootstrap javascript files are included in the index.html file though.

Is this normal behaviour or am I meant to include it manually? I would've expected running Grunt Wiredep to include the bootstrap css files in between the <!-- bower:css --><!-- endbower --> placeholders in the index.html file?

Answer 1

Add the override code for bootstrap to your bower.json file (don't edit anything in bower_components)

"dependencies": {
...
},
"overrides": {
  "bootstrap": {
    "main": [
      "dist/js/bootstrap.js",
      "dist/css/bootstrap.css",
      "less/bootstrap.less"
        ]
    }
}

http://blog.getbootstrap.com/2015/06/15/bootstrap-3-3-5-released/

Answer 2

The official answer from Bootstrap is to use the overrides block in bower.son:

"overrides": {
  "bootstrap": {
    "main": [
      "dist/js/bootstrap.js",
      "dist/css/bootstrap.css",
      "less/bootstrap.less"
    ]
  }
}

Due to vagueness in Bower’s specification, wiredep made some questionable assumptions about how the main field in bower.json works. Recently, Bower updated their spec to address this and clarify how main should work, and we updated our bower.json accordingly. Unfortunately, wiredep broke as a result if you were using it with Bootstrap’s vanilla precompiled CSS. Bower is working to further update their spec to address this problem and better assist tools like wiredep.

Source: http://blog.getbootstrap.com/2015/06/15/bootstrap-3-3-5-released/