sass-bootstrap includes unnecessary js (from bootstrap and jquery)

[lanterndev]

If you answer 'yes' to compass and bootstrap, you end up with the 'sass-bootstrap' bower component. Besides all the bootstrap stylesheets translated into sass, this library also includes all the bootstrap javascript, as well as a dependency on jquery. But many angular apps don't want any of the bootstrap javascript or jquery. Either they only need the bootstrap styles, or they use https://github.com/angular-ui/bootstrap if they need the js components.

Maybe it doesn't hurt too much to depend on sass-bootstrap even with the unnecessary js, but eventually it'd be better to use a library that only included the sass. What do you think?

[sindresorhus]

I agree, it should be separate components, but this should be fixed on the sass-bootstrap issue tracker, so open a ticket over there ;)

[lanterndev]

I already tried that but no love, unfortunately. See jlong/sass-bootstrap#90. Any other ideas?

[sindresorhus]

If anyone would like to maintain it you could create separate packages for it and put it on Bower.

[lanterndev]

Thanks for reopening.

Unfortunately I don't have the bandwidth to take on maintaining a new package at the moment. What's the best way to put the word out to the community so someone else can?

[eddiemonge]

this library also includes all the bootstrap javascript, as well as a dependency on jquery. But many angular apps don't want any of the bootstrap javascript or jquery. 

But some do and removing them is as simple as deleting the lines in index.html

Either they only need the bootstrap styles or they use https://github.com/angular-ui/bootstrap if they need the js components

UI-Bootstrap isn't a 1:1 translation. So people might want to use the JS components. If they want UI-Bootstrap then they can add it like any other dependency.

As soon as the 'which sass-bootstrap is the official one' issue is resolved it should make things easier.

[intellix]

I think this is also related to https://github.com/yeoman/generator-angular/issues/522 in which alot of useless CSS/JS is included with every package. I like the idea of automatically adding to your index.html the CSS and JS but it seems there's a lot of waste and grunt-bower-install is too early to be introduced.

it's adding CSS files when I include them in SASS and then customise by altering variables, so I've had to remove bower:css... and now it looks like I'll have to remove bower:js as well as it's including jquery, boostrap JS too :s

[eddiemonge]

I agree this is an odd bug. I blame Bootstrap since it bundles JS and CSS together when it should have them separately since you dont need the JS for the CSS but the JS can use the CSS but doesn't have to. I honestly don't know how to handle this without take Bootstrap out (but then what good CSS framework should be offered) or don't have Bootstrap in Bower but included manually (but then you lose the power to be able to easily remove it with bower uninstall --save bootstrap...).

Open to suggestions

[entronic]

i believe this can be fixed in your Gruntfile, now that grunt-bower-install has been updated in 6a1678953bce069b4ac79f68e0959e80cbdbaa3f. you should be able to specify exclude patterns in your bowerInstall task. it works for me, although i manually updated my grunt-bower-install to 1.3...

[eddiemonge]

@entronic want to submit a PR to fix this?

[eddiemonge]

@skivvies @entronic @intellix want to try @mrhooray PR to see if it fixes the problem? : https://github.com/yeoman/generator-angular/pull/631

[eddiemonge]

@mrhooray bootstrap-sass-official does depend on jQuery. If you don't include it, then you get JS errors.

[hardywu]

simply config gruntfile

wiredep: {
  options: {
    cwd: '<%= yeoman.app %>',
    exclude: ['bower_components/bootstrap-sass-official/assets/javascripts/{,*/}*.{js}']
  },
  ...
},
...

[peterblazejewicz]

Exclude option value can be shorter:

exclude: ['bower_components/bootstrap-sass-official/assets/javascripts']

[Virviil]

Was searching where to put the exclude so:

wiredep: {
      app: {
        src: ['<%= yeoman.app %>/index.html'],
        exclude: ['bower_components/bootstrap-sass-official/assets/javascripts'],
        ignorePath:  /\.\.\//
      },
      sass: {
        src: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],
        ignorePath: /(\.\.\/){1,2}bower_components\//
      }      
    }

[xml]

@mrhooray, until someone maintains a dedicated package for it, you can just add jquery to your excludes:

wiredep: {
      app: {
        src: ['<%= yeoman.app %>/index.html'],
        ignorePath:  /\.\.\//,
        exclude: [
          'bower_components/bootstrap-sass-official/assets/javascripts',
          'bower_components/jquery'
        ]
      },
      sass: {
        src: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],
        ignorePath: /(\.\.\/){1,2}bower_components\//
      }      
    }

[tangorri]

thanks for the config guys

[mattdarveniza]

Is there any desire for this exclude config to be the default in generator-angular? Thinking a PR to add this config in might be useful?

[mtsweir]

I have a similar issue, I have a project built off yeoman which uses bootstrap, but my main css has the entire boostrap file included with loads of css I don't need. So trying to figure out the best way to take out all the unused css to cut down on file size for production.

[abumalick]

I was looking for a way to remove parts of bootstrap-sass. You can edit bower.json and edit the overrides of bootstrap-sass. Very useful doc about this here :
https://roots.io/using-bootstrap-with-bower-how-to-override-bower-packages/

[lifeisfoo]

To exclude jquery I've added 'bower_components/jquery/dist' to excludes. 'bower_components/jquery' doesn't worked for me.