Problem getting bootstrap.css to be included using wiredep #1116

Closed
mounte opened this Issue Jun 17, 2015 · 50 comments

Projects

None yet
@mounte
mounte commented Jun 17, 2015

When I create a project using:
yo angular
no to compass, yes to bootstrap.
running on ubuntu server 14.04
Everything runs through smooth. I can start up the server with grunt serve but I am presented an unstyled page like this:
image

The header of html looks like:

<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css(.) styles/vendor.css -->
<!-- bower:css -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->

So, no link rel to the bootstrap main css. When I run the grunt build I dont get anything either.
The output of grunt wiredep --verbose --debug is:

Running "wiredep:app" (wiredep) task
[D] Task source: /home/danielw/aapp/node_modules/grunt-wiredep/tasks/wiredep.js
Verifying property wiredep.app exists in config...OK
Files: app/index.html
Verifying property wiredep.app.src exists in config...OK
Options: src=["app/index.html"], ignorePath={}

In the same machine if I start using the webapp generator everything works as expected.
Any idea why it is like this?

@ghost
ghost commented Jun 17, 2015

I'm having the same issue under windows

@strongwray

me too,how to deal with this problem? before i used it's ok.

@RipCurrent

ditto! but found this a great way of getting to understand yeoman :)

@joaopedropannain

It's something wrong with bower.

I put the bootstrap.css on bower components, but grunt remove after few seconds:

 < ! -- bower:css -- >
 < link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" / >

I don't know about bower to correct the script, but create a another css before bower:css

 < ! -- build:css(.tmp) styles/manualvendor.css -- >
    < link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" / >
    < ! -- endbuild -- >
@hpieroni

I'm having the same problem.

@masakura

Me too.

@nivek91
nivek91 commented Jun 18, 2015

+1 same problem, apparently they removed css from bower.json

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

@dspice
dspice commented Jun 18, 2015

Some temp fixes and causes listed here:
twbs/bootstrap#16663

Some Bootstrap bower.json changes broke wiredep insertions.

@louisa-bielig louisa-bielig added a commit to louisa-bielig/mytodo that referenced this issue Jun 18, 2015
@louisa-bielig louisa-bielig hardcoding bootstrap css 2771741
@47ronin
47ronin commented Jun 18, 2015

Bootstrap v3.3.5 will break and delete the bootstrap.css include. Downgrading to v3.3.4 as a dependency will fix this! I tore my hair out trying to figure out the issue!

@47ronin 47ronin referenced this issue in 47ronin/weatherview Jun 22, 2015
@47ronin 47ronin Bootstrap 3.3.5 is BROKEN! 1bcf1ad
@dovy
dovy commented Jun 22, 2015

Boostrap 3.3.5 is replaced with Boostrap 3.0.0 for me...

@eddiemonge
Member

Uh well this is interesting. Setting the version of Bootstrap to 3.3.4 for now. @stephenplusplus @sindresorhus ideas?

@budkin76

+1 This was driving me mad until I found the workaround mentioned.

@yijingping

@eddiemonge thanks. it works for me.

@shakhrillo

+1 I did not find the answer and I removed all and wrote my code myself

@eddiemonge
Member

Should be fixed in 0.12.0

@eddiemonge eddiemonge closed this Jun 30, 2015
@chillyistkult chillyistkult added a commit to chillyistkult/DeviceRegistration that referenced this issue Jun 30, 2015
@chillyistkult chillyistkult Fixed huge issue with bower and bootstrap (see yeoman/generator-angul… 46d2e6c
@harishkumarchellappa

Changing to 3.3.4 worked...thanks

@rapasoft
rapasoft commented Jul 5, 2015

@eddiemonge yup, it works... but it's a bummer

@salangar

Is this issue fixed for Bootstrap 3.3.5? I am using 3.3.5 and unable to include css in dist-index.html. I manually edited bower.json to include the following: "overrides": {
"bootstrap": {
"main": [
"dist/css/bootstrap.css"
]
}

@rotatopoti

Confirmed. This is a bootstrap issue. Change bootstrap version in bower

@adamantike adamantike referenced this issue in yesdoc/web Aug 29, 2015
Merged

Utilización de Bootstrap v3.3.4 #28

@ahmadferdous ahmadferdous added a commit to ahmadferdous/angularjs-spreadsheet-parsing-example that referenced this issue Sep 11, 2015
@ahmadferdous ahmadferdous Fix Bootstrap v3.3.5 styling problem
Change Bootstrap version from 3.3.5 to 3.3.4.

Details about the Bottstrap version matching problem is available at
yeoman/generator-angular#1116

Workaround was found at
http://stackoverflow.com/questions/30946498/yeoman-and-bower-not-adding-bootstrap-css-angular-generator
5227f98
@webskin
webskin commented Sep 23, 2015

Change to 3.3.4 did the trick

@47ronin 47ronin added a commit to 47ronin/twitter-blockquote that referenced this issue Sep 29, 2015
@47ronin 47ronin Resolving issue with TWBS and Bower yeoman/generator-angular#1116 (co… 369e65c
@studiorooster

Downgrading to 3.3.4 fixed it for me!!

@burakhanalkan

3.3.4 fixed the problem for me, too.
Remove '^' sign also from bower.json, since the latest version is installed.

@bengrunfeld

👍 to the bootstrap version fix.

@Codermar

I think most of the answers seem to miss the point. The issue is obviously the main property in the bower.json file for bootstrap in this case (and I actually had the same issue with font-awesome 4.4) It seems like they are changing the convention to include the less files in the main instead of the css and that wiredep does not know about it. See taptapship/wiredep#210

@j-w-miller

Codermar commented 6 days ago ...

tweaking bower.json solved it for me.
was
"main": [ "less/bootstrap.less", "dist/js/bootstrap.js" ]
modified
"main": [ "dist/css/bootstrap.css", "dist/js/bootstrap.js" ],

@saqib053
saqib053 commented Nov 3, 2015

Run the following in your working directory using commmand line tool.

bower install bootstrap-css --save

In my case I am using Windows machine.
It worked perfect after running the above commad

@WayneRiesterer

This problem is due to the bower.json file for Bootstrap 3.3.5 as many have mentioned above.

Downgrading to a previous version might work, but then you lose the benefit of the latest version.

Changing the bower.json file in /bower_components/bootstrap may provide a temporary fix, but if you reload your packages, or use bower install for an initial setup, then the previous package bower.json file will be replaced and then you're back to square one.

You can use an override in your project's bower.json file to redefine an errant or missing property from the package's bower.json file.

To do this, open your project's bower.json file and put this just after dependencies:

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

You can find more information on wiredep's bower overrides at the following link:

https://www.npmjs.com/package/wiredep#bower-overrides

There's an even more comprehensive example by peterblazejewicz which can be found here:

#965 (comment)

Enjoy :)

@katlimruiz

@WayneRiesterer comment worked for me.

@mymai91
mymai91 commented Nov 21, 2015

In index.html, link bootstrap file

<!-- build:css(.) styles/vendor.css -->
      <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- bower:css -->
@sean-madhavan

@mymai91 that code is removed once you run grunt.

@kutyel
kutyel commented Nov 25, 2015

I am runing gulp and have the same error, tried downgrading bootstrap to 3.3.4 and still happens, plus a weird error Error in plugin 'run-sequence' Message: An error occured in task 'client:build'. Any ideas?

@mymai91
mymai91 commented Nov 26, 2015

@sean-madhavan you are right

@hakimirza

@WayneRiesterer I'm using Bootstrap 3.3.6 and your solution worked very well, thank you :)

@fabiopaiva

the problem persist using gulp, grunt ok

@ismaproco

@WayneRiesterer your solution worked for me, this is my bower.json

{
  "name": "testapp",
  "private": true,
  "version": "0.1.0",
  "dependencies": {
    "bootstrap": "~3.x.x",
  },
  "overrides": {
    "bootstrap": {
      "main": [
        "dist/js/bootstrap.js",
        "dist/css/bootstrap.css",
        "less/bootstrap.less"
      ]
    }
  }
}
@postalC
postalC commented Jan 21, 2016

Any work-around for gulp, tried various suggestion and none of them work for gulp.

@respectYourNeighbour respectYourNeighbour added a commit to respectYourNeighbour/GMAN_Boilerplate that referenced this issue Jan 27, 2016
@respectYourNeighbour respectYourNeighbour changed to bootstrap 3.3.4
wiredep has problems to autoinclude bootstrap 3.3.5
yeoman/generator-angular#1116
74002ab
@anilsawant

I did the following selections and it worked for me:
** say NO to suing Sass with Compass
? Would you like to use Gulp (experimental) instead of Grunt? (y/N) n
? Would you like to use Gulp (experimental) instead of Grunt? No
? Would you like to use Sass (with Compass)? (Y/n) n
? Would you like to use Sass (with Compass)? No
? Would you like to include Bootstrap? (Y/n) y
? Would you like to include Bootstrap? Yes

@overmedia

@WayneRiesterer solution worked for me.

@overmedia

@WayneRiesterer solution worked for me.
"bootstrap": "^3.2.0" on OS X

@ariefitriadin

@WayneRiesterer your solution worked for me, this is my bower.json

{
"name": "testapp",
"private": true,
"version": "0.1.0",
"dependencies": {
"bootstrap": "~3.x.x",
},
"overrides": {
"bootstrap": {
"main": [
"dist/js/bootstrap.js",
"dist/css/bootstrap.css",
"less/bootstrap.less"
]
}
}
}

yeah this work as well for me

@jxc876
jxc876 commented Mar 1, 2016

Seems to work fine with the latest version of yeoman-angular (using grunt),
but doesn't seem to work with gulp :(

@khemkaran14

got the same issue on windows...
just did
bower install bootstrap
and then
grunt serve
it worked for me.

@metal3d metal3d referenced this issue in jgthms/bulma Apr 16, 2016
Closed

CSS not in bower.json file #177

@victorazevedo
victorazevedo commented Jun 1, 2016 edited

I put :
bower_components/bootstrap/dist/css/bootstrap.css
in the index.html and it´s working now.

@gouravmakhija18

I have added "bootstrap-sass-official": "~3.1.0", at top of dependencies, everything work awesome.

e.g.

"dependencies": {
            "bootstrap-sass-official": "~3.1.0",
             "jquery": "~2.1.4",
@crrollyson
crrollyson commented Jul 19, 2016 edited

Not ideal, but I rolled back to BS 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'
    }
  }
}`
@eMahtab
eMahtab commented Aug 18, 2016

Just switched to bootstrap 3.3.4 and it worked. Oohh ...

@jimdowling jimdowling added a commit to hopshadoop/hopsworks that referenced this issue Sep 8, 2016
@jimdowling jimdowling Downgrade bootstrap in bower.json to 3.3.4 to fix disappearing bootst…
…rap.css problem - yeoman/generator-angular#1116
854b984
@Murrugarra

Ohh. Changing to 3.3.4 Did the Trick. Thank you so much.!

@SimonStJG SimonStJG pushed a commit to SimonStJG/once-apon-a-time that referenced this issue Dec 19, 2016
@Schottkey Schottkey Pin bootstrap dependency to avoid yeoman/generator-angular#1116 d326fa3
@stefanbaumg

@WayneRiesterer's solution also works for bootswatch with slight modification:

"overrides": {
    "bootswatch-dist": {
      "main": [
        "js/bootstrap.js",
        "css/bootstrap.css",
        "bootstrap.less"
      ]
    }
  }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment