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?
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.