| commit | author | age | ||
| 83c3f6 | 1 | --- |
| SP | 2 | layout: docs |
| 3 | title: Webpack | |
| 4 | description: Learn how to include Bootstrap in your project using Webpack. | |
| 5 | group: getting-started | |
| 6 | toc: true | |
| 7 | --- | |
| 8 | ||
| 9 | ## Installing Bootstrap | |
| 10 | ||
| 11 | [Install bootstrap]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/download/#npm) as a Node.js module using npm. | |
| 12 | ||
| 13 | ## Importing JavaScript | |
| 14 | ||
| 15 | 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`): | |
| 16 | ||
| 17 | {% highlight js %} | |
| 18 | import 'bootstrap'; | |
| 19 | {% endhighlight %} | |
| 20 | ||
| 21 | Alternatively, you may **import plugins individually** as needed: | |
| 22 | ||
| 23 | {% highlight js %} | |
| 24 | import 'bootstrap/js/dist/util'; | |
| 25 | import 'bootstrap/js/dist/alert'; | |
| 26 | ... | |
| 27 | {% endhighlight %} | |
| 28 | ||
| 29 | Bootstrap is dependent on [jQuery](https://jquery.com/) and [Popper](https://popper.js.org/), | |
| 30 | these are defined as `peerDependencies`, this means that you will have to make sure to add both of them | |
| 31 | to your `package.json` using `npm install --save jquery popper.js`. | |
| 32 | ||
| 33 | ## Importing Styles | |
| 34 | ||
| 35 | ### Importing Precompiled Sass | |
| 36 | ||
| 37 | 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. | |
| 38 | ||
| 39 | First, create your own `_custom.scss` and use it to override the [built-in custom variables]({{ site.baseurl }}/docs/{{ site.docs_version }}/getting-started/theming/). Then, use your main Sass file to import your custom variables, followed by Bootstrap: | |
| 40 | ||
| 41 | {% highlight scss %} | |
| 42 | @import "custom"; | |
| 43 | @import "~bootstrap/scss/bootstrap"; | |
| 44 | {% endhighlight %} | |
| 45 | ||
| 46 | For Bootstrap to compile, make sure you install and use the required loaders: [sass-loader](https://github.com/webpack-contrib/sass-loader), [postcss-loader](https://github.com/postcss/postcss-loader) with [Autoprefixer](https://github.com/postcss/autoprefixer#webpack). With minimal setup, your webpack config should include this rule or similar: | |
| 47 | ||
| 48 | {% highlight js %} | |
| 49 | ... | |
| 50 | { | |
| 51 | test: /\.(scss)$/, | |
| 52 | use: [{ | |
| 53 | loader: 'style-loader', // inject CSS to page | |
| 54 | }, { | |
| 55 | loader: 'css-loader', // translates CSS into CommonJS modules | |
| 56 | }, { | |
| 57 | loader: 'postcss-loader', // Run postcss actions | |
| 58 | options: { | |
| 59 | plugins: function () { // postcss plugins, can be exported to postcss.config.js | |
| 60 | return [ | |
| 61 | require('autoprefixer') | |
| 62 | ]; | |
| 63 | } | |
| 64 | } | |
| 65 | }, { | |
| 66 | loader: 'sass-loader' // compiles Sass to CSS | |
| 67 | }] | |
| 68 | }, | |
| 69 | ... | |
| 70 | {% endhighlight %} | |
| 71 | ||
| 72 | ### Importing Compiled CSS | |
| 73 | ||
| 74 | Alternatively, you may use Bootstrap's ready-to-use CSS by simply adding this line to your project's entry point: | |
| 75 | ||
| 76 | {% highlight js %} | |
| 77 | import 'bootstrap/dist/css/bootstrap.min.css'; | |
| 78 | {% endhighlight %} | |
| 79 | ||
| 80 | 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](https://github.com/webpack-contrib/style-loader) and [css-loader](https://github.com/webpack-contrib/css-loader). | |
| 81 | ||
| 82 | {% highlight js %} | |
| 83 | ... | |
| 84 | module: { | |
| 85 | rules: [ | |
| 86 | { | |
| 87 | test: /\.css$/, | |
| 88 | use: ['style-loader', 'css-loader'] | |
| 89 | } | |
| 90 | ] | |
| 91 | } | |
| 92 | ... | |
| 93 | {% endhighlight %} | |
