bootstrap-webpack2

bootstrap-webpack

bootstrap package for webpack.

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

Usage

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. This uses imports-loader of webpack. Install imports-loader by npm install imports-loader --save-dev.

Complete Bootstrap

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

require("bootstrap-webpack");

Custom configuration

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"
  ]
};

Using with other js loaders.

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

bootstrap.config.js

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,
  }
};

bootstrap.config.less

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

Example:

@font-size-base:          24px;
 
@btn-default-color:              #444;
@btn-default-bg:                 #eee;

extract-text-webpack-plugin

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.

extract-text-webpack-plugin and postcss-loader

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.