Bootstrap 图标和 Webpack 5 - 您可能需要适当的加载器来处理此文件类型

Question

我在让 bootstrap 图标与 webpack 一起使用时遇到了很多麻烦：

得到以下内容：

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

使用 webpack 规则：

      {
        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";

我已经尝试了我能找到的一切。我遵循了这个 turoial 的每一行，但仍然无法让它工作： 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 Icons 与 Webpack 5（和 scss）一起使用的最简洁的方法：

第 1 步：使用 NPM 安装 Bootstrap 图标：

npm install --save bootstrap-icons

步骤2：在你的文件中添加一条规则webpack.config.js来复制woff2输出目录中的所有文件：

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

第三步：在你的index.scss导入boostrao图标scss覆盖字体目录中：

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

第 4 步：在 HTML 中使用图标：

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