Webpack не загружает шрифты из bootstrap-icons

Проблема

При импортировании стилей bootstrap-icons Webpack не подтягивает папку fonts/, в которой лежат сами шрифты, из-за чего и возникает ошибка, т. к. в src/fonts/ таких файлов нет.

Обычные шрифты, которые лежат в src/, подтягиваются без проблем.

ERROR in ./src/index.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js
!./node_modules/sass-loader/dist/cjs.js!./src/index.scss)

Module not found: Error: Can't resolve './fonts/bootstrap-icons.woff2?24e3...47' in 'C:\project-name\src'

C:\project-name\src\fonts\bootstrap-icons.woff2 doesn't exist
C:\project-name\src\fonts\bootstrap-icons.woff doesn't exist

Код

Часть webpack.config.js:

{
  output: {
    filename: "[name].[contenthash].js",
    path: path.resolve(__dirname, "dist/"),
    assetModuleFilename: "public/[hash][ext][query]",
    clean: true
  },
  module: {
    rules: {
      test: /\.html$/i,
      use: ["html-loader"]
    },
    {
      test: /\.(sa|sc|c)ss$/i,
      // Здесь в начале также будет "style-loader" или MiniCssExtractPlugin.loader
      // в зависмости от режима (development/production)
      use: ["css-loader", "postcss-loader", "sass-loader"]
    },
    {
      test: /\.(woff|woff2|eot|otf|ttf)$/i,
      type: "asset/resource"
    }
  }
}

Часть index.scss

@import "bootstrap/scss/bootstrap";
@import "bootstrap-icons/font/bootstrap-icons";

Файловая структура

index.html
package.json
webpack.config.js
node_modules/
src/
  index.js
  index.scss

Исходники bootstrap-icons

Часть bootstrap-icons.css.scss то же самое, но более длинным способом)

@font-face {
  font-display: block;
  font-family: "bootstrap-icons";
  src: url("./fonts/bootstrap-icons.woff2?24e3...47") format("woff2"),
url("./fonts/bootstrap-icons.woff?24e3...47") format("woff");
}

Файловая структура

bootstrap-icons/
  font/
    bootstrap-icons.css
    bootstrap-icons.scss
    fonts/
      bootstrap-icons.woff
      bootstrap-icons.woff2

P.S. Странный баг/проблема с консолью (VS Code)

При выполнении npm run build в консоль IDE выводится куча текста — содержимое файлов bootstrap.css и bootstrap-icons.css после обработки, по всей видимости, — которая не влазит ни в какие рамки.

Странно это потому, что ничего и близко подобного я не писал.

Часть package.json

{
  "scripts": {
    "build": "webpack build --mode=production"
  }
}

Часть webpack.config.js

const cfgProd = {
  mode: "production",
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].[contenthash].css"
    })
  ],
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/i,
        use: [MiniCssExtractPlugin.loader]
      }
    ]
  }
}

Потом эта переменная объединяется с cfgCommon при помощи библиотеки webpack-merge.


Ответы (0 шт):