Значки начальной загрузки и Webpack 5. Вам может потребоваться соответствующий загрузчик для обработки этого типа файлов.

Question

У меня много проблем с получением значков начальной загрузки для работы с веб-пакетом:

Получение следующего:

      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

С правилами веб-пакета:

            {
        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"
        ]
      }

И .js как

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

Я перепробовал все, что смог найти. Я следил за каждой строчкой этого урока и до сих пор не могу заставить его работать: 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",

Answer 1

Вот самый простой способ заставить иконки Boostrap работать с Webpack 5 (и scss):

Шаг 1: установите значки Bootstrap с помощью NPM:

      npm install --save bootstrap-icons

Шаг 2: добавьте правило в свойwebpack.config.jsскопировать всеwoff2файлы в выходном каталоге:

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

Шаг 3: в вашемindex.scssимпортировать значок Boostraoscssпереопределение каталога шрифтов:

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

Шаг 4: используйте иконки в своем HTML:

      <i class="bi-alarm"></i>

Answer 2

У меня была такая же проблема, я вроде решил ее, прочитав документацию . Проблема, о которой я подумал впоследствии, заключалась в том, что webpack не очищает неиспользуемые значки начальной загрузки с помощью purgecss.

        {
    test: /\.(woff|woff2|eot|ttf|otf)$/i,
    type: "asset/inline",
  },

Answer 3

Чтобы использовать значки Bootstrap 1.72 с Webpack 5.65

1. Установите следующие библиотеки (если они не были установлены):

      npm install bootstrap-icons
npm install --save-dev mini-css-extract-plugin css-loader postcss-loader sass-loader autoprefixer sass

2. Добавьте следующие правила Webpack:

      // 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",
                }
            }
        }
    ],
},

3. Добавьте следующее в main.scss. Обратите внимание на расширение .css после значков начальной загрузки. Если вы опустите расширение, это приведет к ошибке.

      @import 'bootstrap-icons/font/bootstrap-icons.css';

4. Проверьте значок, добавив его в файл HTML.

      <i class="bi-alarm" style="font-size: 3rem;"></i>