Bootstrap CSS not Loaded in Yeoman Generated App

Recently, I've been confused by the strange behaviour of my yeoman generated app. It used to work with the well known bootstrap css styles. Suddenly, the bootstrap css was gone when I rebuilt the app from another computer, leaving the app in a ugly plain looking. :(

Doing "yo angular" to generate the app, I got the following poor look:

I've been searching and googling but there seems no clear solution to this problem, or basically no one complains about this.

I have to go back and face the issue myself, tweaking the code, running in different environment, updating packages to latest and etc. I have to admit I am not a hard core front end programmer. After spending hours researching and cramming npm/bower/grunt knowledge in my head (feeling a bit overflowed), I finally got a clue.

It turns out the latest version of bootstrap (version 3.3.5 at the time of writing this post) changed the packaging a bit. the file "bower.json" has been updated to comply with Bower's new spec for the main field according to the release notes. Basically the main field of the new bower.json only includes the ".less" and ".js" files. There is no more ".css" file. However, the wiredep task in grunt still looks for ".css" file in the main field!

By just nailing the version of bootstrap in the "bower.json" of my app to 3.3.4, the problem is just solved. :)

That is:

{   ...  "dependences": {    ...    "bootstrap": "3.3.4",    ...  }  ...}

Finally, I got this "stylish" look back!

I guess since version 3.3.5 complies with the new spec of bower, the other components such as wiredep in grunt will also upgrade to use the new spec. But for now, I have to stay with the older version of bootstrap.