CODEWITHSUNDEEP
twitter-bootstrapnpmwebpack
Littlee
Littlee

Reputation: 4337

Customize Bootstrap installed from npm

I am using webpack to require Bootstrap, so I install bootstrap from npm, but I also want to customize Bootstrap by modify 'variables.less', It cause a problem, the next time I upgrade Bootstrap from npm, my modification is gone, so what should I do?

Upvotes: 7

Views: 5264

Answers (2)

Hugues M.
Hugues M.

Reputation: 20477

Building on Shane's answer, I did it this way:

  • copy node_modules/bootstrap/less/bootstrap.less to boostrap-custom.less
  • place that file in your source tree, for example src/style/bootstrap-custom.less
  • in the file, create a variable that points to bootstrap's less sources (that one is under node_modules), and search/replace all existing @import directives to point to correct path (see example below). Customize as needed.
  • require/import that file where needed: import './style/bootstrap-custom.less';

Example (adapt relative path, comment out unwanted modules, do your customizations, etc):

/* Custom Bootstrap composer */

@BS: "../../node_modules/bootstrap/less";

// Core variables and mixins
@import "@{BS}/variables.less";
@import "@{BS}/mixins.less";

// Reset and dependencies
@import "@{BS}/normalize.less";
@import "@{BS}/print.less";
// Disabling glyphicons for [reasons]
//@import "@{BS}/glyphicons.less";
[...]

Variable interpolation in @import statements was implemented in Less 1.4.0, so nowadays it should be supported everywhere.

This should survive (minor) updates to bootstrap. Of course if they heavily change the main .less file you might need to adapt or redo it.

Upvotes: 4

Shane Cavaliere
Shane Cavaliere

Reputation: 2223

You can easily overwrite LESS variables in your own custom file outside of Bootstrap. As long as you @import the file with your Bootstrap variable overwrites after you @import all of the Bootstrap LESS files, you'll be fine.

Upvotes: 5

Related Questions