Removing Bootstrap 3 default styling - node.js

Question

For a recent site, the client has 5 different brand styling colours. So to keep track of everything in the less files (which we use node to compile to one final css file), I've defined the colours as less variables and used the .button-variant() mixin to generate the styles. e.g.
#color-cta-light: #df134d;
#color-cta-dark: #860c2f;
#color-cta-background: #fcf7fa;
.btn-cta {
.button-variant(#ffffff, #color-cta-light, #color-cta-dark);
}
That works fine. However, I've done this with panels as well, and I've now ended up with an 11,000 line long css file. It is this long because we need the majority of the default Bootstrap styling (such as .btn styling) as well as my custom styles.
What I am wondering is, (and keeping it simply by using just buttons as an example) is there a good easy way to remove the lines in the css that pertain to the default Bootstrap button styling, i.e. btn-success, btn-warning, etc. By easy, I mean automatically. We're using the node lessc modules to compile the less files (using a grunt watcher), so I imagine whatever it is that would need to happen would be run after the compile.
Alternatively, should I just amend the default bootstrap mixins to do nothing, and use my own custom mixins? I feel like that should work but that would mean a bit of extra time each new version of Bootstrap (currently 3.1) spent making sure that the custom mixins are up to date.
What I'm hoping to end up with is a single stylesheet, with default button styling from button.less without the additional overload of unused CSS. With my understanding, it's not possible but I'm hoping there are some tools out there that I don't know of that would help my situation.

Answer 1

If I understand you correctly, looking at both your question and your comment to Bass Jobsen, you want to keep Bootstrap styling, but not for the "button styling."
I believe the LESS (reference) feature is still what you want, but just selectively applied.
Assuming you are using the "bootstrap.less" file, add the reference notation just before the "buttons.less" file, like so (I've elided much of the normal "boostrap.less" file for brevity):
// Core variables and mixins
#import "variables.less";
#import "mixins.less";
...
// Core CSS
...
#import (reference) "buttons.less";
// Components
...
// Utility classes
#import "utilities.less";
#import "responsive-utilities.less";
This will totally deactivate all classes from "buttons.less" from being generated in your output css code, but still keep those classes available for mixin purposes. Should you need a particular piece from that code, let us say you wanted to keep the base .btn class, then you would have to add it back into your css, like so:
.btn {
.btn;
}
The outer .btn will reform a class in your code, while the inner .btn will use the referenced "buttons.less" .btn to generate the code.
Using (reference) in this way lets you selectively remove aspects of boostrap by module, while keeping those aspects accessible for the rest of bootstrap and for any mixin uses you have for it. This is probably a preferable method if you desire to remove most of the code from a module (if you actually wanted to keep most of the code, it would probably be best to just let the unused portion remain and import it normally).

Answer 2

You can use import with reference:
#import (reference) "bootstrap.less";
#color-cta-light: #df134d;
#color-cta-dark: #860c2f;
#color-cta-background: #fcf7fa;
.btn-cta {
.button-variant(#ffffff, #color-cta-light, #color-cta-dark);
}
This will give you only the CSS for you button. (and some :before : after pseudo classes which seems a bug for me).