Webpack + Customizable Bootstrap 3.x (LESS)

Author Artem Butusov · Published on September 11th, 2016

  1. Install npm --save install bootstrap
  2. Create directory src/bootstrap
  3. Copy file from node_modules/bootstrap/less/bootstrap.less to src/bootstrap/bootstrap.less
  4. Fix import to begin with @import "~bootstrap/less/...";.
  5. Add theme import @import "~bootstrap/less/theme.less";.
  6. Add overrides, for example @import "variables.less"; and redefine @brand-primary.
  7. Create file src/bootstrap/bootstrap.js. Please refer to node_modules/bootstrap/dist/js/npm.js to find out what js modules could be used and in what order.
  8. Test with html: <button class="btn btn-primary">Test Button</button>.
  9. Import import './bootstrap/bootstrap'; and import './bootstrap/bootstrap.less'; to load library somewhere in main entry file.
  10. Fix webpack.config.js to define jQuery as global variable.

Example src/bootstrap/bootstrap.js:

import 'bootstrap/js/transition';
import 'bootstrap/js/alert';
import 'bootstrap/js/button';
import 'bootstrap/js/carousel';
import 'bootstrap/js/collapse';
import 'bootstrap/js/dropdown';
import 'bootstrap/js/modal';
import 'bootstrap/js/tooltip';
import 'bootstrap/js/popover';
import 'bootstrap/js/scrollspy';
import 'bootstrap/js/tab';
import 'bootstrap/js/affix';

src/bootstrap/bootstrap.js could be used to remove js components from library. src/bootstrap/bootstrap.less could be used to remove css components from library. src/bootstrap/*.less could be used to alter variables, mixins or components.

Example of webpack.config.js:

module.exports = {
  ...

  plugins: [
    ...
    new webpack.ProvidePlugin({
      jQuery: 'jquery',             // bootstrap 3.x requires
    })
    ...
  ]
  ...
}