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 codelab@0.0.0 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 fsevents@0.3.6

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.

score 57 · Accepted Answer · edited Sep 19 '16 at 01:33

57

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

edited Sep 19 '16 at 01:33

Peter Mortensen

30,738
21
105
131

answered Jun 20 '15 at 11:29

metalwood

686
6
3

2

before editing it out, my bootstrap line had a `^` before the version number (like this `"angular": "^1.3.0"`). Any idea on what that does, and if I should put it back in before the bootstrap version? Other than that, the site looks like it should now, so I'm finally ready to move on with the codelab. thanks – Miha Šušteršič Jun 20 '15 at 15:02
4

I believe that just means the requirement is anything higher than 1.3.0. So for bootstrap it was "bootstrap": "^3.2.0", meaning install anything that is higher than 3.2.0. Therefore it goes and installs the latest 3.3.5 which doesn't work. Setting it to 3.3.4 without the ^ says only install this version, nothing higher. – metalwood Jun 20 '15 at 22:23
I had the same problem, worked like a charm form me. – Urr4 Apr 14 '16 at 08:01

score 25 · Answer 2 · edited Sep 19 '16 at 01:34

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"
          ]
    }
  }

score 10 · Answer 3 · answered Jun 25 '15 at 03:23

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.

score 1 · Answer 4 · edited Sep 19 '16 at 01:35

1

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",

edited Sep 19 '16 at 01:35

Peter Mortensen

30,738
21
105
131

answered Oct 19 '15 at 16:51

burak

3,839
1
15
20

score 0 · Answer 5 · edited Sep 19 '16 at 01:35

0

It is not ideal, but I rolled back to Bootstrap version 3.3.4 and setting up like this:

bower install --save bootstrap#3.3.4

bower_concat: {
  all: {
    dest: {
      'js': 'path/to/file/_bower.js',
      'css': 'path/to/file/_bower.css'
    }
  }
}

edited Sep 19 '16 at 01:35

Peter Mortensen

30,738
21
105
131

answered Jul 19 '16 at 20:24

CR Rollyson

1,521
1
13
12

Yeoman and Bower not adding Bootstrap CSS (AngularJS generator)

5 Answers5

Linked