From b5f2d5a31e24455447939c3a7487a4fe89a66ba6 Mon Sep 17 00:00:00 2001 From: Philip Wedemann <22521688+hfhbd@users.noreply.github.com> Date: Fri, 3 Jun 2022 16:28:33 +0200 Subject: Replace wrong mobile OS Windows with iOS --- site/content/docs/5.2/getting-started/browsers-devices.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/content/docs/5.2/getting-started/browsers-devices.md b/site/content/docs/5.2/getting-started/browsers-devices.md index 41885feaad..dc550ecb9c 100644 --- a/site/content/docs/5.2/getting-started/browsers-devices.md +++ b/site/content/docs/5.2/getting-started/browsers-devices.md @@ -30,7 +30,7 @@ Generally speaking, Bootstrap supports the latest versions of each major platfor | | Chrome | Firefox | Safari | Android Browser & WebView | | --- | --- | --- | --- | --- | | **Android** | Supported | Supported | | v6.0+ | -| **Windows** | Supported | Supported | Supported | | +| **iOS** | Supported | Supported | Supported | | {{< /bs-table >}} ### Desktop browsers -- cgit v1.2.3 From 4f97d8fabda142685e36391da2c37c7e09955ac6 Mon Sep 17 00:00:00 2001 From: charlesroelli <3193168+charlesroelli@users.noreply.github.com> Date: Thu, 1 Sep 2022 21:14:07 +0200 Subject: Document how to extract CSS, SVG for strict CSP (#36587) * Webpack: explain how to extract CSS from bundle * Webpack: explain how to extract SVG from bundle * Update webpack.md Co-authored-by: Mark Otto --- site/content/docs/5.2/customize/overview.md | 2 +- site/content/docs/5.2/getting-started/webpack.md | 87 ++++++++++++++++++++++++ 2 files changed, 88 insertions(+), 1 deletion(-) diff --git a/site/content/docs/5.2/customize/overview.md b/site/content/docs/5.2/customize/overview.md index 1b332bfe46..d0a853cd68 100644 --- a/site/content/docs/5.2/customize/overview.md +++ b/site/content/docs/5.2/customize/overview.md @@ -48,4 +48,4 @@ Several Bootstrap components include embedded SVGs in our CSS to style component - [Navbar toggle buttons]({{< docsref "/components/navbar#responsive-behaviors" >}}) - [Select menus]({{< docsref "/forms/select" >}}) -Based on [community conversation](https://github.com/twbs/bootstrap/issues/25394), some options for addressing this in your own codebase include replacing the URLs with locally hosted assets, removing the images and using inline images (not possible in all components), and modifying your CSP. Our recommendation is to carefully review your own security policies and decide on the best path forward, if necessary. +Based on [community conversation](https://github.com/twbs/bootstrap/issues/25394), some options for addressing this in your own codebase include [replacing the URLs with locally hosted assets]({{< docsref "/getting-started/webpack#extracting-svg-files" >}}), removing the images and using inline images (not possible in all components), and modifying your CSP. Our recommendation is to carefully review your own security policies and decide on the best path forward, if necessary. diff --git a/site/content/docs/5.2/getting-started/webpack.md b/site/content/docs/5.2/getting-started/webpack.md index ca104f98c1..86bab39eb9 100644 --- a/site/content/docs/5.2/getting-started/webpack.md +++ b/site/content/docs/5.2/getting-started/webpack.md @@ -230,6 +230,93 @@ Importing Bootstrap into Webpack requires the loaders we installed in the first Now you can start adding any Bootstrap components you want to use. Be sure to [check out the complete Webpack example project](https://github.com/twbs/examples/tree/main/webpack) for how to include additional custom Sass and optimize your build by importing only the parts of Bootstrap's CSS and JS that you need. +## Production optimizations + +Depending on your setup, you may want to implement some additional security and speed optimizations useful for running the project in production. Note that these optimizations are not applied on [the Webpack example project](https://github.com/twbs/examples/tree/main/webpack) and are up to you to implement. + +### Extracting CSS + +The `style-loader` we configured above conveniently emits CSS into the bundle so that manually loading a CSS file in `dist/index.html` isn't necessary. This approach may not work with a strict Content Security Policy, however, and it may become a bottleneck in your application due to the large bundle size. + +To separate the CSS so that we can load it directly from `dist/index.html`, use the `mini-css-extract-loader` Webpack plugin. + +First, install the plugin: + +```sh +npm install --save-dev mini-css-extract-plugin +``` + +Then instantiate and use the plugin in the Webpack configuration: + +```diff +--- a/webpack/webpack.config.js ++++ b/webpack/webpack.config.js +@@ -1,8 +1,10 @@ ++const miniCssExtractPlugin = require('mini-css-extract-plugin') + const path = require('path') + + module.exports = { + mode: 'development', + entry: './src/js/main.js', ++ plugins: [new miniCssExtractPlugin()], + output: { + filename: "main.js", + path: path.resolve(__dirname, "dist"), +@@ -18,8 +20,8 @@ module.exports = { + test: /\.(scss)$/, + use: [ + { +- // Adds CSS to the DOM by injecting a `