From 915345426c0b963555d05f04ce65d782341b27e4 Mon Sep 17 00:00:00 2001 From: Charles Roelli Date: Wed, 15 Jun 2022 21:42:19 +0200 Subject: [PATCH] Webpack: explain how to extract SVG from bundle --- site/content/docs/5.2/customize/overview.md | 2 +- .../docs/5.2/getting-started/webpack.md | 27 +++++++++++++++++-- 2 files changed, 26 insertions(+), 3 deletions(-) diff --git a/site/content/docs/5.2/customize/overview.md b/site/content/docs/5.2/customize/overview.md index 1b332bfe4671..d0a853cd6862 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 423dab2e5f5f..48d93efa5ddf 100644 --- a/site/content/docs/5.2/getting-started/webpack.md +++ b/site/content/docs/5.2/getting-started/webpack.md @@ -272,7 +272,7 @@ Then instantiate and use the plugin in the Webpack configuration. After running `npm run build` again, there will be a new file `dist/main.css`, which will contain all of the CSS imported by `src/js/main.js`. -If you view `dist/index.html` in your browser now, the style will be missing, as it is now in a separate file. You can include the generated CSS in `dist/index.html` like this: +If you view `dist/index.html` in your browser now, the style will be missing, as it is now in `dist/main.css`. You can include the generated CSS in `dist/index.html` like this: ```diff --- a/webpack/dist/index.html @@ -289,7 +289,30 @@ If you view `dist/index.html` in your browser now, the style will be missing, as ### Extracting SVG files -Bootstrap's CSS includes multiple references to SVG files provided as inline `data:` URIs. If you define a Content Security Policy for your project without allowing `data:` URIs for images, then these SVG files will not load. You can get around this problem by extracting the inline SVG files using Webpack's asset modules feature. +Bootstrap's CSS includes multiple references to SVG files via inline `data:` URIs. If you define a Content Security Policy for your project that blocks `data:` URIs for images, then these SVG files will not load. You can get around this problem by extracting the inline SVG files using Webpack's asset modules feature. + +You can configure Webpack to extract inline SVG files like this: +```diff +--- a/webpack/webpack.config.js ++++ b/webpack/webpack.config.js +@@ -16,6 +16,14 @@ module.exports = { + }, + module: { + rules: [ ++ { ++ mimetype: 'image/svg+xml', ++ scheme: 'data', ++ type: 'asset/resource', ++ generator: { ++ filename: 'icons/[hash].svg' ++ } ++ }, + { + test: /\.(scss)$/, + use: [ +``` + +After running `npm run build` again, you will find the SVG files extracted into `dist/icons` and properly referenced from CSS. {{< markdown >}} {{< partial "guide-footer.md" >}}