Awesome
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.
- Use
exclude
option of the module.loaders section of the config. - 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.