bootstrap package for webpack
npm install --save bootstrap-webpack
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" }
]
}
};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.jsbootstrap.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"
]
};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;