Preserve settings and customizations when updating Bootstrap

Recently i launched the Bootstrap CLI tool. This tool installs Bootstrap 4 and an example template to start your project.

The templates for the Bootstrap CLI tool install Bootstrap 4 with bower, which means that you can update Bootstrap by simply running bower update. Updating Bootstrap shouldn’t destroy your changes.

All of Bootstrap’s Sass variable are declared with the !default flag, in the _variables.scss partial file. Using a copy of this file will be help to preserve your changes. Disadvantage of the preceding solution is that new variables added in the new release become undeclared and should be added by hand.

You can prevent the undeclared variables by loading the original and updated _variables.scss from your bower directory after your local one. You should rename your local file.

In your app.scss the preceding should look like that shown beneath:

@import "util/variables"; // non bootstrap project variables
@import "bootstrap-variables"; //local copy
@import "bootstrap.scss"; //local copy
// import or write your custom code here

When new variables are added in the new release they will be set to their defualt value and new default values will overwritten by the local copy. In the case you want to change a new variable, you still have to add it by hand in your local copy. Also new modules and components should be added by hand in the local bootstrap.scss file.

The local _bootstrap-variables.scss and _bootstrap.scss are not automatically generated when creating a new project because of updates of Bootstrap may break the template code.

Leave a Reply

(will not be published)