Yeoman and Bower not adding Bootstrap CSS (AngularJS generator)

Question

I am following along a codelab on the Yeoman webpage, and so far I've managed to follow along (with a few major hiccups getting my development environment going, but now it doesn't return any errors).

So I made my project folder and ran yo, selected AngularJS and run the thing. Fairly soon into the process I got a prompt ? Overwrite package.json? I answered with y and got the following warnings:

npm WARN package.json [email protected] No license field.
npm WARN peerDependencies The peer dependency karma@>=0.9 included from karma-jasmine will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency 
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm WARN peerDependencies The peer dependency jasmine-core@* included from karma-jasmine will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency 
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm WARN peerDependencies The peer dependency karma@>=0.9 included from karma-phantomjs-launcher will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency 
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm WARN peerDependencies The peer dependency phantomjs@>=1.9 included from karma-phantomjs-launcher will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency 
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm WARN peerDependencies The peer dependency karma@~0.12.0 included from grunt-karma will no
npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency 
npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly.
npm WARN optional dep failed, continuing [email protected]

After that, it finished what it was doing, so I ran bower install again just to be sure (because of the package.json thing), and then grunt serve. Now grunt says done, without errors, but my page only loads main.css. I have a strong feeling the bootstrap.css file is missing. This is what it looks like, when the codelab instructions say it should look like this.

If you need further information on what was generated, here's a GitHub repository link.

Any insight on what I'm doing wrong (if anything) is welcome.

Answer 1

After doing the codelab I had exactly the same problem with the same result as you are getting (warnings and all). I had to just work around the issue by rolling back to Bootstrap 3.3.4.

Just edit bower.json and change the Bootstrap line to:

    "bootstrap": "3.3.4", 

Then run the following and it should work:

    bower install     grunt serve 

Answer 2

It didn't work for me either. I got a solution from here: https://github.com/twbs/bootstrap/issues/16663

We fixed this issue temporary by overriding our project bower.json. For us it works fine, but we are waiting for some solution from Bootstrap.

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

Answer 3

If you stick to a shell, you can just type:

bower install --save bootstrap#3.3.4
grunt serve

That will ensure that Twitter Bootstrap gets downgraded to a more Bower/yo-angular friendly version and save it as a dev dependency. Grunt will then run 'wiredep' during its 'serve' task and append the bootstrap.css in your project's index.html.

Answer 4

In the bower.json file, the dependency version of Bootstrap is set as:

"bootstrap": "^3.2.0",

By default, that means install the latest version higher than 3.2.0. As a result, the latest version 3.3.5 is installed and that breaks.

So, remove the ^ sign and replace:

"bootstrap": "^3.2.0",

with:

"bootstrap": "3.3.4",