bootstrap package for webpack.

This is the less version. If you are looking for the sass version, refer to bootstrap-sass-loader.

Bootstrap use some fonts. You need to configure the correct loaders in your webpack.config.js. Example:

module.exports = {
  module: {
    loaders: [
      // the url-loader uses DataUrls.
      // the file-loader emits files.
      {test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff'},
      {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
      {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
      {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'}
    ]
  }
};

Bootstrap javascript components depends on jQuery. The simplest way of adding jQuery to your webpack app is by exposing $ and jQuery to global namespace.

require('expose?$!expose?jQuery!jquery');

Add it before requiring bootstrap-webpack. This uses expose-loader of webpack. Install expose-loader by npm install expose-loader --save-dev.

To use the complete bootstrap package including styles and scripts with the default settings:

require("bootstrap-webpack");

You can configurate bootstrap-webpack with two configuration files:

• bootstrap.config.js
• bootstrap.config.less

Add both files next to each other to your project. And:

require("bootstrap-webpack!./bootstrap.config.js");

Or simple add it as entry point to your webpack.config.js:

module.exports = {
  entry: [
    "bootstrap-webpack!./bootstrap.config.js",
    "your-existing-entry-point"
  ]
};

If you are using other loaders for all js files(test: /\.js$/), this might interfere with bootstrap-webpack. You can override the configuration loader order in the module request to suit special cases.

• adding ! to a request will disable configured preLoaders

require("!bootstrap-webpack!./bootstrap.config.js")

• adding !! to a request will disable all loaders specified in the configuration

require("!!bootstrap-webpack!./bootstrap.config.js")

• adding -! to a request will disable configured preLoaders and loaders but not the postLoaders

require("-!bootstrap-webpack!./bootstrap.config.js")

Check details in webpack loader order

You can also change your configuration, so that other loaders are not applied to bootstrap.

1. Use exclude option of the module.loaders section of the config.
2. Adjust the regex in test option of the module loaders to prevent matching all the js files to which the loaders are applied.

See the explanation of different module options under module.loaders

Example:

module.exports = {
  scripts: {
    // add every bootstrap script you need
    'transition': true
  },
  styles: {
    // add every bootstrap style you need
    "mixins": true,

    "normalize": true,
    "print": true,

    "scaffolding": true,
    "type": true,
  }
};

Write less code. I. e. overwrite the default colors or sizes.

Example:

@font-size-base:          24px;

@btn-default-color:              #444;
@btn-default-bg:                 #eee;

Configure style loader in bootstrap.config.js.

Example:

module.exports = {
  styleLoader: require('extract-text-webpack-plugin').extract('style-loader', 'css-loader!less-loader'),
  scripts: {
    ...
  },
  styles: {
    ...
  }
};

Install extract-text-webpack-plugin before using this configuration.

Configure style loader in bootstrap.config.js.

Example:

module.exports = {
  styleLoader: require('extract-text-webpack-plugin').extract('style-loader', 'css-loader!postcss-loader!less-loader'),
  scripts: {
    ...
  },
  styles: {
    ...
  }
};

Install extract-text-webpack-plugin before using this configuration.