0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-04 16:24:22 +01:00
Bootstrap/docs/4.0/getting-started/webpack.md

3.8 KiB

layout title description group toc
docs Webpack Learn how to include Bootstrap in your project using Webpack 3. getting-started true

Installing Bootstrap

[Install bootstrap]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/download/#npm) as a Node.js module using npm.

Importing JavaScript

Import [Bootstrap's JavaScript]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/javascript/) by adding this line to your app's entry point (usually index.js or app.js):

{% highlight js %} import 'bootstrap'; {% endhighlight %}

Alternatively, you may import plugins individually as needed:

{% highlight js %} import 'bootstrap/js/dist/util'; import 'bootstrap/js/dist/dropdown'; ... {% endhighlight %}

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:

{% highlight js %} // don't forget to import webpack (using import or require) to use webpack.ProvidePlugin plugins: [ ... new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery', Popper: ['popper.js', 'default'], // In case you imported plugins individually, you must also require them here: Util: "exports-loader?Util!bootstrap/js/dist/util", Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown", ... }) ... ] {% endhighlight %}

{% callout warning %} Notice that if you chose to import plugins individually, you must also install exports-loader {% endcallout %}

Importing Styles

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]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/options/). Then, use your main sass file to import your custom variables, followed by Bootstrap:

{% highlight scss %} @import "custom"; @import "~bootstrap/scss/bootstrap"; {% endhighlight %}

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:

{% highlight js %} ... { test: /.(scss)$/, use: [{ loader: 'style-loader', // inject CSS to page }, { loader: 'css-loader', // translates CSS into CommonJS modules }, { loader: 'postcss-loader', // Run post css actions options: { plugins: function () { // post css plugins, can be exported to postcss.config.js return [ require('precss'), require('autoprefixer') ]; } } }, { loader: 'sass-loader' // compiles Sass to CSS }] }, ... {% endhighlight %}

Importing Compiled CSS

Alternatively, you may use Bootstrap's ready-to-use css by simply adding this line to your project's entry point:

{% highlight js %} import 'bootstrap/dist/css/bootstrap.min.css'; {% endhighlight %}

In this case you may use your existing rule for css without any special modifications to webpack config except you don't need sass-loader just style-loader and css-loader.

{% highlight js %} ... module: { rules: [ { test: /.css$/, use: ['style-loader', 'css-loader'] } ] } ... {% endhighlight %}