Проблемы с обработкой шрифтов с веб-пакетом 4 - React JS

Question

Я получаю ошибки, когда пытаюсь импортировать мой fontawesome css в мою реакцию. Я исследовал и перепробовал множество доступных вариантов, но, похоже, ничего не работает.

Вот мои коды:

const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');

module.exports = { 
    entry: './src/index.js', 
    output: { 
        path: path.resolve(__dirname, 'dist'), 
        filename: 'main.js', 
        publicPath: '/'
    }, 
    devServer: { 
        historyApiFallback: true,
        host: 'localhost', 
        port: 8080,
    }, 
    module: { 
        rules: [ 
            { 
                test: /\.(js|jsx)$/, 
                exclude: /node_modules/, 
                use: { 
                    loader: "babel-loader" 
                } 
            }, 
            { test: /\.html$/, 
                use: [ 
                    { 
                        loader: "html-loader", 
                        options: 
                        { 
                            minimize: true 
                        } 
                    } 
                ] 
            }, 
            { 
                test: /\.css$/, 
                use: [MiniCssExtractPlugin.loader, "css-loader"] 
            },
            {
                test: /\.scss$/,
                use: [
                    "style-loader", 
                    "css-loader", 
                    "sass-loader" 
                ]
            }, 
            { 
                test: /\.(cur|jpg|jpeg|gif|png|woff|woff2|eot|ttf|svg)$/, 
                loader: "url-loader?limit=50000&name=fonts/[name].[ext]" 
            } 
        ] 
    }, 
    plugins: [ 
        new HtmlWebPackPlugin({
            template: "./src/index.html", // Compiles html file in src folder 
            filename: "./index.html" 
        }), 
        new MiniCssExtractPlugin({ 
            filename: "[name].css", 
            chunkFilename: "[id].css" 
        }), 
        new CopyWebpackPlugin([ // Compiles directories in src folder 
            {
                from:'src/assets',
                to:'assets'
            }
        ])
    ] 
};

И мой css импорт:

@import './assets/vendor/bootstrap/css/bootstrap.min.css';
@import './assets/vendor/fonts/circular-std/style.css';
@import './assets/libs/css/style.css';

@import './assets/vendor/charts/chartist-bundle/chartist.css';
@import './assets/vendor/charts/morris-bundle/morris.css';
@import './assets/vendor/charts/c3charts/c3.css';

@import './assets/vendor/fonts/fontawesome/css/fontawesome-all.css';
@import './assets/vendor/fonts/material-design-iconic-font/css/materialdesignicons.min.css';
@import './assets/vendor/fonts/flag-icon-css/flag-icon.min.css';

@import './assets/vendor/vector-map/jqvmap.css';
@import './assets/vendor/jvectormap/jquery-jvectormap-2.0.2.css';
@import './assets/vendor/daterangepicker/daterangepicker.css';
.slimScrollBar {
    background: rgba(255, 227, 227, 0.473) !important; 
}

Тогда вот ошибка, с которой я имею дело:

7m��4/��u?���ow���t�\o�����|�/�═�wifD��˘�ظx��g,_Ǥ�Դ�̬�ܼ��¢��2EyEeUuM��O?ʸ
Ӳ�╚ A═G Qh
�╝9�Q��B��I
           �B╔��l��NT/o����<�1�B║e(-%_��Q�'m/╚�'�ύT���¦�!Ԡԃw�_��o5�ӭ��m�<
�cS� ║��f��5╝�j' �S�x q���^�rǧ�da~�lˑ���D��i6@�GIWj�Ӌ�:αЁ�@uF5F*9aKtj[
��d     �roH)������n�║T��߭��R�k�'�#�N�J�:c5���z�%���(8�Ct╚�Z╚Z��/��╔%o;��
�j��Ѿa�m4�9vTQg��CA��h���=�,�����
                                 eI�=� ��n
                                          ��5K���S
                                                  �n:�t5�ck��Ӆͼ:�K�
H��
   Bߵ�z�       k�|���d%O�
                         J�7���e)     �
                                             W�×╝�e_��0�#�<\S&$M��ĔxJ��
)�#�I�
L�Sk5�h�Hq����l�7�o�ɦ=Hp%5��=
                             J��ms�MQ�as'A�ܝ
                                            �)?�9�:�
                                                    ړg��ɇ��[��"g�(㏳��a�n
��mѐS{��?�╗�W�u��`��*G���
    F╗��.Α���f�EPշ�6֤��W���d���C����)��5!Ws�*��i�c�
                                                  ��޴1�~A�x��║;�7��.Gs#
��P{�R��S�z��  
        at new HTMLParser (C:\New React\concept\node_modules\html-minifier\src\htmlparser.js:240:13)
        at minify (C:\New React\concept\node_modules\html-minifier\src\htmlminifier.js:966:3)
        at Object.exports.minify (C:\New React\concept\node_modules\html-minifier\src\htmlminifier.js:1326:16)
        at Object.module.exports (C:\New React\concept\node_modules\html-loader\index.js:128:26)
     @ ./src/assets/vendor/fonts/fontawesome/css/fontawesome-all.css (./node_modules/css-loader/dist/cjs.js!./src/assets/vendor/fonts/fontawesome/css/fontawesome-all.css) 6:36-77
     @ ./node_modules/css-loader/dist/cjs.js!./src/App.css

Всякий раз, когда я закомментирую следующее CSS, мое приложение успешно компилируется:

@import './assets/vendor/fonts/fontawesome/css/fontawesome-all.css';
@import './assets/vendor/fonts/material-design-iconic-font/css/materialdesignicons.min.css';

К сожалению, мне нужны оба CSS файлов. В любом случае я могу go об этом?