Learn how to include Bootstrap in your project using Webpack 2.
Install bootstrap as a Node.js module using npm.
Alternatively, you may import plugins individually as needed:
Bootstrap is dependent on jQuery and Popper, so npm will install them for you if needed. But they must be explicitly provided by webpack. Add the following code to the
plugins section in your webpack config file:
Notice that if you chose to import plugins individually, you must also install exports-loader
Importing Precompiled Sass
To enjoy the full potential of Bootstrap and customize it to your needs, use the source files as a part of your project’s bundling process.
First, create your own
_custom.scss and use it to override the built-in custom variables. Then, use your main sass file to import your custom variables, followed by Bootstrap:
For Bootstrap to compile, make sure you install and use the required loaders: sass-loader, postcss-loader with Autoprefixer. With minimal setup, your webpack config should include this rule or similar:
Importing Compiled CSS
Alternatively, you may use Bootstrap’s ready-to-use css by simply adding this line to your project’s entry point:
In this case you may use your existing rule for
css without any special modifications to webpack config.