bootstrap-webpack (original) (raw)

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 tothe 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;