Skip to content
This repository has been archived by the owner. It is now read-only.

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

Closed
mounte opened this issue Jun 17, 2015 · 52 comments
Closed

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

mounte opened this issue Jun 17, 2015 · 52 comments

Comments

@mounte
Copy link

@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
Copy link

@ghost ghost commented Jun 17, 2015

I'm having the same issue under windows

@strongwray
Copy link

@strongwray strongwray commented Jun 17, 2015

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

@RipCurrent
Copy link

@RipCurrent RipCurrent commented Jun 17, 2015

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

@joaopedropannain
Copy link

@joaopedropannain joaopedropannain commented Jun 17, 2015

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
Copy link

@hpieroni hpieroni commented Jun 18, 2015

I'm having the same problem.

@masakura
Copy link

@masakura masakura commented Jun 18, 2015

Me too.

@nivek91
Copy link

@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
Copy link

@dspice dspice commented Jun 18, 2015

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

Some Bootstrap bower.json changes broke wiredep insertions.

@cvrebert
Copy link
Contributor

@cvrebert cvrebert commented Jun 18, 2015

louisa-bielig added a commit to louisa-bielig/mytodo that referenced this issue Jun 18, 2015
@47ronin
Copy link

@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!

@dovy
Copy link

@dovy dovy commented Jun 22, 2015

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

@Frondor
Copy link

@Frondor Frondor commented Jun 23, 2015

@eddiemonge
Copy link
Member

@eddiemonge eddiemonge commented Jun 24, 2015

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

@budkin76
Copy link

@budkin76 budkin76 commented Jun 27, 2015

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

@yijingping
Copy link

@yijingping yijingping commented Jun 30, 2015

@eddiemonge thanks. it works for me.

@shakhrillo
Copy link

@shakhrillo shakhrillo commented Jun 30, 2015

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

@eddiemonge
Copy link
Member

@eddiemonge eddiemonge commented Jun 30, 2015

Should be fixed in 0.12.0

@katlimruiz
Copy link

@katlimruiz katlimruiz commented Nov 20, 2015

@WayneRiesterer comment worked for me.

@mymai91
Copy link

@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 -->
@seanmadhaven
Copy link

@seanmadhaven seanmadhaven commented Nov 24, 2015

@mymai91 that code is removed once you run grunt.

@kutyel
Copy link

@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
Copy link

@mymai91 mymai91 commented Nov 26, 2015

@sean-madhavan you are right

@hakimirza
Copy link

@hakimirza hakimirza commented Dec 13, 2015

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

@fabiopaiva
Copy link

@fabiopaiva fabiopaiva commented Dec 30, 2015

the problem persist using gulp, grunt ok

@ismaproco
Copy link

@ismaproco ismaproco commented Jan 16, 2016

@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
Copy link

@postalC postalC commented Jan 21, 2016

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

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

@anilsawant anilsawant commented Feb 3, 2016

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
Copy link

@overmedia overmedia commented Feb 8, 2016

@WayneRiesterer solution worked for me.

@overmedia
Copy link

@overmedia overmedia commented Feb 15, 2016

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

@ariefitriadin
Copy link

@ariefitriadin ariefitriadin commented Feb 29, 2016

@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
Copy link

@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
Copy link

@khemkaran14 khemkaran14 commented Mar 18, 2016

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

@victorazevedo
Copy link

@victorazevedo victorazevedo commented Jun 1, 2016

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

@gouravmakhija18
Copy link

@gouravmakhija18 gouravmakhija18 commented Jun 14, 2016

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
Copy link

@crrollyson crrollyson commented Jul 19, 2016

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
Copy link

@eMahtab eMahtab commented Aug 18, 2016

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

jimdowling added a commit to dc-sics/hopsworks that referenced this issue Sep 8, 2016
@EriksonMurrugarra
Copy link

@EriksonMurrugarra EriksonMurrugarra commented Nov 13, 2016

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

SimonStJG added a commit to SimonStJG/once-apon-a-time that referenced this issue Dec 19, 2016
@stefanbaumg
Copy link

@stefanbaumg stefanbaumg commented Dec 21, 2016

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

"overrides": {
    "bootswatch-dist": {
      "main": [
        "js/bootstrap.js",
        "css/bootstrap.css",
        "bootstrap.less"
      ]
    }
  }
@pavlito
Copy link

@pavlito pavlito commented Mar 1, 2017

Hi guys, you can still use latest version of bootstrap 3.3.7 .

You need to modify bower.json located inside bootstrap folder.

Need to add key "overrides and specify bootstrap.css location.

Here is mine content
<pre> { "name": "yb", "description": "YourBourse project", "main": "index.html", "authors": [ "Pavle Lucic <pavlito1988@gmail.com>" ], "license": "MIT", "homepage": "", "private": true, "ignore": [ "**/.*", "node_modules", "bower_components", "app/libs", "test", "tests" ], "dependencies": { "respond": "^1.4.2", "html5shiv": "^3.7.3", "modernizr": "^3.3.1", "jquery": "^3.1.1", "bootstrap": "3.3.7", "bootstrap3-ie10-viewport-bug-workaround": "^1.0.0" }, "overrides": { "bootstrap": { "main": [ "dist/css/bootstrap.css" ] } } } </pre>

@jpdavy
Copy link

@jpdavy jpdavy commented Mar 9, 2017

Wiredep works by looking at the bower.json file inside the bower packages file. In this case bower_components/bootstrap/bower.json

Open bower_components/bootstrap/bower.json and change:

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

to

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

If you want to use the bootstrap theme css as well:

  "main": [
    "less/bootstrap.less",
    "dist/js/bootstrap.js",
    "dist/css/bootstrap.css",
    "dist/css/bootstrap-theme.css"
  ],
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
You can’t perform that action at this time.