How to keep Twitter Bootstrap customization with Bower?

Question

I'm working in a project with yeoman which includes grunt for automation and bower for client-side package management. One of the dependencies of my project is SASS twitter-bootstrap.

In other projects, in which I manually managed the updates of dependencies, I changed Bootstrap values directly in the Bootstrap variables.less (_variables.scss) file and extend it in main.less files under the project own css folder. I did the same here, but when I installed other packages with Bower it overrode everything (I "un-.gitignored" my components' folder, thanks God)

What's the best way to customize Bootstrap outside the components' folder so it won't happen again?

Answer 1

You should never modify the contents of the bower_components folder. We'll make sure to make that clearer.

As for your question. Copy the _variables.scss file from the bower_components folder to eg. app/styles, then import it into your main.scss, or whatever it's named, above the import statement for bootstrap. This will result in your custom file overriding the default variables.