Geek Answers Handbook

Bootstrap setup installed with npm

I use webpack to require Bootstrap , so I install bootstrap from npm, but I also want to configure Bootstrap by changing "variables.less". This causes a problem, the next time I update Bootstrap from npm, my modification has disappeared, so what should I do?

+5
source share
2 answers

You can easily rewrite LESS variables into your own file outside of Bootstrap. As long as you @import the file with your Bootstrap variable is overwritten after you @import all Bootstrap LESS files, you'll be fine.

+5
source

Based on Shane's answer , I did it as follows:

  • copy node_modules/bootstrap/less/bootstrap.less to boostrap-custom.less
  • put this file in the source tree, for example src/style/bootstrap-custom.less
  • in the file, create a variable pointing to the less source files that are under node_modules ), and find / replace all existing @import directives to indicate the correct path (see example below). Adjust as needed.
  • require / import this file, if necessary: import './style/bootstrap-custom.less';

Example (adapt relative path, comment out unwanted modules, make settings, 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 was implemented in Meneghi 1.4.0 , so it should be supported everywhere now.

This is to survive (minor) updates for bootstrapping. Of course, if they greatly alter the main .less file, you may need to adapt or redo it.

+2
source

More articles:


All Articles