aboutsummaryrefslogtreecommitdiff
path: root/docs/getting-started/webpack.md
diff options
context:
space:
mode:
Diffstat (limited to 'docs/getting-started/webpack.md')
-rw-r--r--docs/getting-started/webpack.md99
1 files changed, 0 insertions, 99 deletions
diff --git a/docs/getting-started/webpack.md b/docs/getting-started/webpack.md
deleted file mode 100644
index dd246e045..000000000
--- a/docs/getting-started/webpack.md
+++ /dev/null
@@ -1,99 +0,0 @@
----
-layout: docs
-title: Webpack
-description: Learn how to include Bootstrap in your project using Webpack 2.
-group: getting-started
-toc: true
----
-
-## Installing Bootstrap
-
-[Install bootstrap](/getting-started/download/#npm) as a node module using npm.
-
-## Importing JavaScript
-
-Import [Bootstrap's JavaScript](/getting-started/javascript/) by adding this line to your app's entry point (usally `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](https://jquery.com/) and [Popper](https://popper.js.org/), 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 %}
- 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](https://github.com/webpack-contrib/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](/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](https://github.com/webpack-contrib/sass-loader), [postcss-loader](https://github.com/postcss/postcss-loader) with [Autoprefixer](https://github.com/postcss/autoprefixer#webpack) and [postcss-flexbugs-fixes](https://github.com/luisrudge/postcss-flexbugs-fixes). 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.