How can I customise Bootstrap without losing the changes?
bower, css, gruntjs, twitter-bootstrap, twitter-bootstrap-3
Solution
you can create a `variables-custom.less` and import it into `theme.less` like this:
//
// Load core variables and mixins
// --------------------------------------------------
@import "variables.less";
//import custom-variables after variables so the values will override.
@import "custom-variables.less"; //only has variables that have changed.
@import "mixins.less";
IMO this is a little bit better than the first solution because you wont have to load two (almost) identical CSS files on the client.
I'm sorry I cant help you with what to to about Bower and your source control as I do not use Bower
Problem
I'm using Bower to manage Bootstrap and would like to make some changes (colours, font size etc) to the default Bootstrap look and feel. Here's my workflow: - Edit `bower_components/bootstrap/less/variables.less` - Recompile bootstrap using `grunt build` The problem is that I want to be able to upgrade bootstrap when a new version comes out and presumably I'll lose my changes to `variables.less`. Is there a way I can keep my changes outside of `bower_components` and also avoid having `bower_components` in source control since it's 122MB?