diff options
| author | Johann-S <johann.servoire@gmail.com> | 2020-10-01 10:29:10 +0300 |
|---|---|---|
| committer | XhmikosR <xhmikosr@gmail.com> | 2020-10-20 11:17:06 +0300 |
| commit | 480561c64b377698a712501e690d2a3d8753c87b (patch) | |
| tree | 2da49792c37259cffbbca1ca3a758523efc57850 /site/content | |
| parent | 9cc24cf549cd38d0414fd6ae18873c0cca478f74 (diff) | |
mention default export in our docs optimize section
Diffstat (limited to 'site/content')
| -rw-r--r-- | site/content/docs/5.0/customize/optimize.md | 33 |
1 files changed, 22 insertions, 11 deletions
diff --git a/site/content/docs/5.0/customize/optimize.md b/site/content/docs/5.0/customize/optimize.md index 358fe86b73..a554e3c34f 100644 --- a/site/content/docs/5.0/customize/optimize.md +++ b/site/content/docs/5.0/customize/optimize.md @@ -24,21 +24,32 @@ For instance, assuming you're using your own JavaScript bundler like Webpack or ```js // Import just what we need -// import "bootstrap/js/dist/alert"; -// import "bootstrap/js/dist/button"; -// import "bootstrap/js/dist/carousel"; -// import "bootstrap/js/dist/collapse"; -// import "bootstrap/js/dist/dropdown"; -import "bootstrap/js/dist/modal"; -// import "bootstrap/js/dist/popover"; -// import "bootstrap/js/dist/scrollspy"; -// import "bootstrap/js/dist/tab"; -// import "bootstrap/js/dist/toast"; -// import "bootstrap/js/dist/tooltip"; +// import 'bootstrap/js/dist/alert'; +// import 'bootstrap/js/dist/button'; +// import 'bootstrap/js/dist/carousel'; +// import 'bootstrap/js/dist/collapse'; +// import 'bootstrap/js/dist/dropdown'; +import 'bootstrap/js/dist/modal'; +// import 'bootstrap/js/dist/popover'; +// import 'bootstrap/js/dist/scrollspy'; +// import 'bootstrap/js/dist/tab'; +// import 'bootstrap/js/dist/toast'; +// import 'bootstrap/js/dist/tooltip'; ``` This way, you're not including any JavaScript you don't intend to use for components like buttons, carousels, and tooltips. If you're importing dropdowns, tooltips or popovers, be sure to list the Popper.js dependency in your `package.json` file. +{{< callout info >}} +### Exports + +Files in `bootstrap/js/dist` use the **default export**, so if you want to use one of them you have to do the following: + +{{< highlight js >}} +import Modal from 'bootstrap/js/dist/modal' +const modal = new Modal(document.getElementById('myModal')) +{{< /highlight >}} +{{< /callout >}} + ## Autoprefixer .browserslistrc Bootstrap depends on Autoprefixer to automatically add browser prefixes to certain CSS properties. Prefixes are dictated by our `.browserslistrc` file, found in the root of the Bootstrap repo. Customizing this list of browsers and recompiling the Sass will automatically remove some CSS from your compiled CSS, if there are vendor prefixes unique to that browser or version. |