Skip to content
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore
LICENSE
README.md
bootstrap-scripts.loader.js
bootstrap-styles.loader.js
bootstrap.config.js
bootstrap.config.less
index.js
index.loader.js
package.json

README.md

bootstrap-webpack

bootstrap package for webpack

Installation

npm install --save bootstrap-webpack

Usage

For a complete example see: bootstrap-webpack-example. To see the example running live go to the bootstrap-webpack-example Gitub Pages.

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

module.exports = {
  module: {
    loaders: [
      // **IMPORTANT** This is needed so that each bootstrap js file required by
      // bootstrap-webpack has access to the jQuery object
      { test: /bootstrap\/js\//, loader: 'imports?jQuery=jquery' },

      // Needed for the css-loader when [bootstrap-webpack](https://github.com/bline/bootstrap-webpack)
      // loads bootstrap's css.
      { test: /\.woff(2)?(\?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" }
    ]
  }
};

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

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;
You can’t perform that action at this time.