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!

Hendecasyllable

same issue, were you able to solve this? – Sikata

no. is it gulp's fault or bootstrap's fault? – Hendecasyllable

not sure, I am still facing the issue – Sikata

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.

Arnettearney

pull request to bootstrap? – Hendecasyllable

I'm not sure what you are asking. look into your \bower_components\bootstrap\ folder, there will be a file bower.json, edit it and change the "main" section to what i stated above. – Arnettearney

Answer 2

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!

Penicillium

Answer 3

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.

Genome

Answer 4

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!

Vapor

Answer 5

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'));
});

Ackley

this works much better. I tried the one marked as the answer but if the 'bower install' is run it resets the bower.json file in the bootstrap directory (as it should be expected it to). this way avoids modifying that file and it accidentally getting reset. – Humpage

one note to consider when using bower . is that you must not modify any file in bower folder. – Ackley

Answer 6

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.

Pollock