webpack - 如何使 Font Awesome 5 与 webpack 配合使用

Question

我正在尝试在我的 Flask/webpack 项目中使用 Fontawesome。

最疯狂的事情是它在某个时候起作用然后停止了，我改变了一些愚蠢的东西，它再次起作用，最后它完全停止工作。

我有:

包配置:

  "devDependencies": {
        ...
        "css-loader": "^1.0.0",
        "node-sass": "^4.9.3",
        "sass-loader": "^7.1.0",
        "style-loader": "^0.23.0",
        "webpack": "^4.19.0",
        "webpack-cli": "^3.1.0",
        "webpack-merge": "^4.1.4"
    },
    "dependencies": {
        "@fortawesome/fontawesome-free": "^5.3.1",
        "bootstrap": "^4.1.3",
         ...
    }

webpack 配置(规则部分):

   test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
        use: [{
            loader: 'file-loader',
            options: {
            name: '[name].[ext]',
            outputPath: '../fonts/',  
            publicPath: '../static/fonts' 
            }
        }]
    },
    {
        test: /\.css$/,
        use: [
            'style-loader',
            'css-loader',
            'sass-loader'
        ]
    },
    {
        test: /\.scss$/,
        use: [
            "style-loader", 
            "css-loader", 
            "sass-loader" 
        ]
    },

webpack，入口部分:

entry: {
        myStyles: './stles/myStyles.js'
    },

myStyles.js:

import fontawesome from "@fortawesome/fontawesome-free/scss/fontawesome.scss";
import regular from "@fortawesome/fontawesome-free/scss/regular.scss";
import solid from "@fortawesome/fontawesome-free/scss/solid.scss";
import brands from "@fortawesome/fontawesome-free/scss/brands.scss";

fontawesome.library.add(solid, regular, brands) 

最后一行在 Chrome 中导致了错误:

Uncaught TypeError: Cannot read property 'add' of undefined

我还尝试将导入添加到我的条目 scss 中，它在某个时候起作用，然后停止了:

$fa-font-path: '~@fortawesome/fontawesome-free/webfonts';
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import "~@fortawesome/fontawesome-free/scss/regular";
@import "~@fortawesome/fontawesome-free/scss/solid";
@import "~@fortawesome/fontawesome-free/scss/brands";

所以，最后在我的模板中我有:

<i class="fas fa-user-circle fa-fw"></i>

我看到的只是正方形。

我检查了 Chrome，字体已加载(ttf、woff、woff2)。

请帮忙。我已经在这个问题上浪费了超过 6(!!!)个小时，这比我花在与 webpack 相关的任何其他事情上的时间还要多。

UPD 我想我已经明白了。我发现我的公共(public)路径是错误的，我的意思是 webpack 配置的这一部分: publicPath: '../static/fonts' - 它当前指向我的 html 上一级的 static/fonts 文件夹。首先，相对路径本身是错误的，其次，相对路径不适用于其他文件夹，第三，我已将其更改为相对于根目录:'/static/fonts'并且它有效。

Answer 1

在我的项目( HTML Starter 和 webpack 4.26.1)中，我通过两个变体添加了 FontAwesome:

1。安装并添加

我刚刚安装了FontAwesome Free (v5.5.0)

npm install --save-dev @fortawesome/fontawesome-free

我添加到index.js

import '@fortawesome/fontawesome-free/js/fontawesome'
import '@fortawesome/fontawesome-free/js/solid'
import '@fortawesome/fontawesome-free/js/regular'
import '@fortawesome/fontawesome-free/js/brands'

Source code / Commit

2。与 API/SVG 一起使用

我installed FontAwesome (svg 核心、品牌图标、常规图标、实体图标)

npm install --save-dev @fortawesome/fontawesome-svg-core @fortawesome/free-brands-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons

我添加到JS文件

import { library, dom } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'

library.add(fas, far, fab) 

dom.i2svg() 

Source code with comments / Commits