aboutsummaryrefslogtreecommitdiff
path: root/docs/4.0/getting-started/webpack.md
diff options
context:
space:
mode:
authorMark Otto <[email protected]>2018-04-09 09:00:23 -0700
committerGitHub <[email protected]>2018-04-09 09:00:23 -0700
commit8f7bd419935adfcd53c471a0202083464800619e (patch)
treed0e6ab018a0f41b59a1206cf72ffc79a474e69b9 /docs/4.0/getting-started/webpack.md
parent91730a644f107ca80a747a6f7f0c173eca5708fa (diff)
downloadbootstrap-4.1.0.tar.xz
bootstrap-4.1.0.zip
Ship v4.1.0 (#26218)v4.1.0
* update docs path from docs/4.0/ to docs/4.1/ * bump version to 4.1.0 * Update redirects to work for 4.1 docs move * Update docs version switcher to include latest and link to 4.0 docs * re-run dist * Update package-lock.json * Update docs-navbar.html
Diffstat (limited to 'docs/4.0/getting-started/webpack.md')
-rw-r--r--docs/4.0/getting-started/webpack.md99
1 files changed, 0 insertions, 99 deletions
diff --git a/docs/4.0/getting-started/webpack.md b/docs/4.0/getting-started/webpack.md
deleted file mode 100644
index e8a57cf96..000000000
--- a/docs/4.0/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 3.
-group: getting-started
-toc: 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](https://jquery.com/) and [Popper](https://popper.js.org/),
-these are defined as `peerDependencies`, this means that you will have to make sure to add both of them
-to your `package.json` using `npm install --save jquery popper.js`.
-
-{% capture callout %}
-Notice that if you chose to **import plugins individually**, you must also install [exports-loader](https://github.com/webpack-contrib/exports-loader)
-{% endcapture %}
-{% include callout.html content=callout type="warning" %}
-
-## 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](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:
-
-{% 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](https://github.com/webpack-contrib/style-loader) and [css-loader](https://github.com/webpack-contrib/css-loader).
-
-{% highlight js %}
- ...
- module: {
- rules: [
- {
- test: /\.css$/,
- use: ['style-loader', 'css-loader']
- }
- ]
- }
- ...
-{% endhighlight %}