Webpack + Customizable Bootstrap 3.x (LESS)

Published on Author Artem Butusov1 Comment
  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
    })
    ...
  ]
  ...
}

One Response to Webpack + Customizable Bootstrap 3.x (LESS)

  1. Thanks Artem. Finally something useful. I been looking all over internet trying to make my overridden bootstrap (less) to work with webpack. Your blog made me realize that the bootstrap.less in node_modules was causing all my file errors

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.