How to fulfill Bower's Bootstrap dependency with my own LESS-built version

Question

I'm working on an AngularJS project (yo angular scaffolding) that uses Grunt, Bootstrap, and some things that depend on Bootstrap (like angular-strap). I have a custom variables.less file for Bootstrap that I am trying to use.

While I certainly can have my own copy of Bootstrap 3, and can compile my own bootstrap.css using my variables.less file, the bowerInstall task in Grunt always ensures that my index.html file is updated to also point to the Bower Bootstrap package's CSS files.

Bootstrap is already a pretty heavy payload, so I certainly don't want two of them - which is what I'm seeing. When I build:dist with Grunt (and eventually with my Cordova build process), I see that both my copy of Bootstrap and Bower's are included. That causes me problems.

So what I need is a way to get Bower to accept that I have Bootstrap 3 covered and to ignore that dependency for other Bower components. Otherwise I'm forced to put my custom LESS file in the Bower Bootstrap folder, which is a no-no.

Any thoughts?

UPDATE:

Robin's answer below dealt with my problem here perfectly. What I didn't know was that I was also having a problem with cssmin in Grunt. Even though my index.html no longer had both my and Bower's Bootstrap CSS listed (due to Robin's solution), I still ended up with a main.css that included two copies of minified bootstrap.css. One was based on my raw version, the other copy coming from the .tmp folder that was used by Grunt's autoprefixer and rev tasks. The way my index.html was configured, cssmin was pulling in the processed version of bootstrap.css in .tmp as well as my original, which caused a doubly sized 'minified' file. The line in question in index.html looked like this:

<!-- build:css({.tmp,app}) styles/main.css -->

Changing it to this fixed the doubling problem:

<!-- build:css(.tmp) styles/main.css -->

Though it still left me with the glyphicons breaking, which is another problem in and of itself that I partially dealt with by no longer minifying bootstrap.css.

Answer 1

The package, grunt-bower-install, has an option exclude for this. A bit strangely its documentation is part of wiredep project (which grunt-bower-install uses).

So you can just exclude the Boostrap CSS by adding the following option to the bowerInstall task:

exclude: [ 'bower_components/bootstrap/dist/css/bootstrap.css' ]

Maybe you will need to exclude the bootstrap.min.css too. Or even use a regex like:

exclude: [ /bootstrap/ ]

Answer 2

I'd rather use a cleaner 'yeoman way' by using the grunt-customize-bootstrap npm package.

It avoids the ugly specific exclusion and doesn't come with minifying problems.