gulp Bower wiredep not picking up bootstrap.css?

Question

I have an index.html file. In my bower.json file I have a dependency:

"bootstrap": "~3.3.2"

In a gulp file I have:

  gulp.src('./main.html')
    .pipe(wiredep({
      bowerJson: require('./bower.json')
    }))
    .pipe(gulp.dest('./'));

When I do this, I see all the css and js being generated, but do not see the bootstrap.css included anywhere within the inject, other dependencies are. What is going on?

I figure there must be a simple fix for this? Or does gulp have problems with this compared to grunt?

Update: I am getting **** thrown at me at a hardcore maven fanatic about how bower and node sucks compared to maven and how after bower install you have to manually modify a bower.json file of a package after it downloads. If there is some way to legitimately not have to modify bower.json or a way to incorporate this into the build process where were not having to require a developer to do this... please update!

Answer 1

After i changed the bower.json file in the root that was originally pointing to a *.less file to the following:

"main": ["dist/css/bootstrap.css"],

It now works.

Note: i removed the entry for bootstrap.js because i don't need it.

Answer 2

Yes as @Helzgate said, bootstrap is considering bootstrap.less as the default style file instead of bootstrap.css, you can check this out by going to

bower_components/bootstrap/bower.json

then you can see clearly that the main attribute is holding the following value :

main": [
    "less/bootstrap.less",
    "dist/js/bootstrap.js"
  ]

so all you have to do is replacing less/bootstrap.less with dist/css/bootstrap.css like this :

"main": [
    "dist/css/bootstrap.css",
    "dist/js/bootstrap.js"
  ]

and VOILA that is it.

Answer 3

Instead of replacing/modifying bootstrap's bower.json we can override the main object in the project's bower.json.

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

This works for me!

Answer 4

You can use up to Bootstrap 3.3.4. After that, no css is injected. Only JS. This is all mentioned exhaustively in https://github.com/twbs/bootstrap/issues/16663. It probably will take a while before this is resolved. As of today, it still has not been resolved. The thing is that wiredep works so beautifully with my workflow. The only other thing that works as well is gulp-inject, but then that's gulp, and gulp is not so Bootstrap friendly.

Answer 5

This is a problem with the latest version of Bootstrap, 3.3.5. See the following GitHub issue for more info:

https://github.com/twbs/bootstrap/issues/16663

In other words, it should work fine up until version 3.3.4.

Make sure to list the actual version you want to use in Bower; using ~3.3.2 in your bower.json after 3.3.5 has already been installed for example, would still make Bower resort to 3.3.5, just change that to 3.3.2 instead of ~3.3.2 and you'll be golden!

Answer 6

you can set override in wiredep option like this :

gulp.task('bower',['inject-js'],function(){
return gulp.src('./www/index.html')
    .pipe(wiredep({
        "overrides" : {
            "bootstrap":{
                "main":[Set the path to any thing you like]
            }
        },
        directory:'./www/lib/'
    }))
    .pipe(gulp.dest('./www'));
});