Как сделать Font awesome 5 работать с webpack

Я пытаюсь использовать Fontawesome в моем проекте Flask/webpack.

Самое сумасшедшее - это то, что он работал, тогда остановился, я изменил что-то глупое, он снова работал и, наконец, полностью прекратил работать.

Что я имею:

пакет конфигурации:

  "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

Я также попытался добавить импорт в свой сценарий ввода, и он работал в какой-то момент, а затем остановился:

$fa-font-path: '[email protected]/fontawesome-free/webfonts';
@import "[email protected]/fontawesome-free/scss/fontawesome";
@import "[email protected]/fontawesome-free/scss/regular";
@import "[email protected]/fontawesome-free/scss/solid";
@import "[email protected]/fontawesome-free/scss/brands";

Итак, наконец, в моем шаблоне я:

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

и я вижу только квадраты.

Я проверил Chrome, загрузились шрифты (ttf, woff, woff2).

Пожалуйста помоги. Я уже потратил больше 6 (!!!!) часов, потраченных на эту проблему, и это больше, чем я потратил на что-то еще, связанное с webpack.

UPD Думаю, я понял это. Я обнаружил, что мой общедоступный путь был неправильным, я имею в виду эту часть webpack config: publicPath: '../static/fonts' - он в настоящее время указывает на папку static/fonts на один уровень выше моего html. Во-первых, относительный путь сам по себе неправилен, во-вторых, относительный путь не будет работать для других папок, в-третьих, я изменил его на отношение к корню: '/static/fonts', и он сработал.