1

I'm having a lot of trouble getting bootstrap icons to work with webpack:

Getting the following:

ERROR in ./node_modules/bootstrap-icons/font/bootstrap-icons.css 1:0
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> @font-face {
|   font-family: "bootstrap-icons";
|   src: url("./fonts/bootstrap-icons.woff2?856008caa5eb66df68595e734e59580d") format("woff2"),
 @ ./src/index.js 3:0-50

With webpack rules:

      {
        test: /\.((png)|(eot)|(woff)|(woff2)|(ttf)|(svg)|(gif))(\?((v=\d+\.\d+\.\d+)|(\w*)))?$/,
        use: { loader: "file-loader?name=/[hash].[ext]" }
      },
      ...

      {
        test: /\.(sa|sc|c)ss$/,
        exclude: /node_modules/,
        use: [
          "style-loader",
          MiniCssExtractPlugin.loader,
          "css-loader",
          "postcss-loader",
          "sass-loader"
        ]
      }

And .js as

import "./scss/main.scss";
import "bootstrap-icons/font/bootstrap-icons.css";

I've tried everything I could find. I followed every line of this turoial, and still can'f get it to work: https://odan.github.io/2021/01/07/webpack-bootstrap-icons.html

webpack: "5.52.1",
"bootstrap-icons": "^1.5.0",
"file-loader": "^6.2.0",
Isidoro
  • 385
  • 5
  • 15

3 Answers3

5

Here is the cleanest way I found to make Boostrap Icons work with Webpack 5 (and scss):

Step 1: install Bootstrap icons with NPM:

npm install --save bootstrap-icons

Step 2: add a rule in your webpack.config.js to copy all woff2 files in the output directory:

module.exports = {
    module: {
        rules: [{
            test: /\.woff2?$/,
            type: "asset/resource",
        }]
    }
}

Step 3: in your index.scss import boostrao icon scss overrifing font directory:

$bootstrap-icons-font-dir: "~bootstrap-icons/font/fonts";
@import "~bootstrap-icons/font/bootstrap-icons.scss";

Step 4: use icons in yout HTML:

<i class="bi-alarm"></i>
Gian Marco
  • 22,140
  • 8
  • 55
  • 44
  • This was the only one that worked for me. Overriding the `$bootstrap-icons-font-dir` path so it'd look inside the node_modules instead of relative to my webpack output was the key. Doesn't even seem like I need the .woff2 rule. Only that path override. What's that rule do? – Tom Mertz Mar 30 '23 at 23:00
  • Doh, I think I didn't realize that it was actually saving the fonts into my output folder! Very cool. – Tom Mertz Mar 30 '23 at 23:15
  • Step 3 is very important, this will make Webpack to look for the fonts in the node_modules directory instead of relative to the css files, where it will obviously fail and end up with the error `Can't resolve 'fonts/bootstrap-icons.woff2?24e3eb84d0bcaf83d77f904c78ac1f47' in `. – Souvik Ghosh Apr 07 '23 at 07:56
4

I had the same problem, i kind of solved it by reading the documentation. The problem that i figured afterwards was that webpack doesnt purge bootstrap's unusued icons with purgecss.

  {
    test: /\.(woff|woff2|eot|ttf|otf)$/i,
    type: "asset/inline",
  },
Dharman
  • 30,962
  • 25
  • 85
  • 135
Bes
  • 79
  • 1
  • 1
    This solved it for me. The problem was, when webpack encounters the woff files in the css, it doesn't know what to do with them. This rule embeds the fonts as data in the css so you no longer need to link to the font files. – Narbs Aug 15 '22 at 01:46
1

To use Bootstrap Icons 1.72 with Webpack 5.65

  1. Install the following libraries (if they have not been installed):
npm install bootstrap-icons
npm install --save-dev mini-css-extract-plugin css-loader postcss-loader sass-loader autoprefixer sass
  1. Add the following Webpack rules:
// Put this at the top of index.js or other entry files
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

// Rule for processing the Bootstrap icons
{
    test: /\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.eot($|\?)|\.svg($|\?)/i,
    type: 'asset/resource',
    generator: {
        //filename: 'fonts/[name]-[hash][ext][query]'
        filename: 'fonts/[name][ext][query]'
    }
},

...

// Rule for processing .css and .scss files
{
    test: /\.s?css$/,
    use: [
        // Save the CSS as a separate file to allow caching                            
        MiniCssExtractPlugin.loader,
        {
            // Translate CSS into CommonJS modules
            loader: 'css-loader',
        },
        {
            // Run postcss actions
            loader: 'postcss-loader',
            options: {
                postcssOptions: {
                    plugins: [
                        function () {
                            return [ require('autoprefixer') ];
                        }
                    ],
                },
            },
        },
        {
            loader: 'sass-loader',
            options: {
                sassOptions: {
                    outputStyle: "compressed",
                }
            }
        }
    ],
},
  1. Add the following to main.scss. Please note the .css extension after bootstrap-icons. If you omit the extension, it will lead to an error.
@import 'bootstrap-icons/font/bootstrap-icons.css';
  1. Test the icon by adding this to a HTML file.
<i class="bi-alarm" style="font-size: 3rem;"></i>
Louis
  • 19
  • 4