Невозможно импортировать более одного шрифта Font Awesome одновременно с Webpack в среде разработчика

Question

Я уже некоторое время возился с этим и не могу понять это. Я использую Webpack для обслуживания моих JS и CSS. Я пытаюсь использовать версию Font Awesome 5 для S CSS. Когда я импортирую one Font Awesome face, мой CSS по-прежнему выглядит нормально (хотя значок загружается неправильно), но если Я импортирую два или более шрифта Потрясающие лица, все мои CSS полностью терпят неудачу. Никаких ошибок в консоли не выводится. Более того, если я строю свой проект в производственном режиме (NODE_ENV=production npx webpack), CSS загружается нормально.

Мой webpack.config. js:

const path = require("path");

const TerserPlugin = require("terser-webpack-plugin");
const BundleTracker = require("webpack-bundle-tracker");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const BrowserSyncPlugin = require("browser-sync-webpack-plugin");

const isProdMode = process.env.NODE_ENV === "production";
const isDevMode = !isProdMode;

const jsTest = /\.jsx?$/;
const jsExclude = /node_modules/;
const scssTest = /\.scss$/;

module.exports = {
  mode: isDevMode ? "development" : "production",
  devtool: isDevMode ? "cheap-source-map" : false,

  entry: {
    index: "./assets/js/index.js"
  },

  output: {
    filename: "[name].[contenthash].js",
    path: __dirname + "/app/static",
    publicPath: "/static/"
  },

  optimization: {
    minimizer: [
      new TerserPlugin({
        test: jsTest,
        exclude: jsExclude,

        chunkFilter: chunk => chunk !== "vendors",

        parallel: true,
        sourceMap: isDevMode,

        terserOptions: {
          ecma: 8
        }
      })
    ],

    moduleIds: isDevMode ? "named" : "hashed",
    runtimeChunk: "single",

    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /\/node_modules\//,
          name: "vendors",
          chunks: "all"
        }
      }
    }
  },

  plugins: [
    new MiniCssExtractPlugin({
      filename: isDevMode ? "[name].css" : "[name].[contenthash].css"
    }),

    new BundleTracker({
      filename: "./app/static/webpack-stats.json"
    }),

    isDevMode &&
      new BrowserSyncPlugin({
        host: "localhost",
        port: 3000,

        proxy: "http://localhost:5000/"
      })
  ].filter(Boolean),

  module: {
    rules: [
      {
        test: jsTest,
        exclude: jsExclude,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: ["@babel/preset-env"],
              sourceMap: isDevMode
            }
          }
        ]
      },
      {
        test: scssTest,
        use: [
          isProdMode ? MiniCssExtractPlugin.loader : "style-loader",
          {
            loader: "css-loader",
            options: {
              importLoaders: 1
            }
          },
          {
            loader: "postcss-loader",
            options: {
              plugins: [
                require("cssnano")({
                  preset: "default"
                })
              ]
            }
          },
          {
            loader: "sass-loader",
            options: {
              sourceMap: isDevMode
            }
          }
        ]
      },
      {
        test: /\.(png|gif|jpe?g)$/i,
        loader: "url-loader",
        options: {
          limit: 8192
        }
      },
      {
        test: /\.(woff2|ttf|otf|woff|svg|eot)$/i,
        loader: "file-loader"
      }
    ]
  },

  resolve: {
    alias: {
      "~": path.resolve(__dirname, "assets")
    }
  }
};

Мой индекс. с css (импортируется по индексу. js):

// setup font awesome
$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
@import "~@fortawesome/fontawesome-free/scss/fontawesome";

// If I comment all but one of these, the CSS loads fine.
// Otherwise, the entire CSS stops working without any errors.
@import "~@fortawesome/fontawesome-free/scss/regular";
@import "~@fortawesome/fontawesome-free/scss/solid";
@import "~@fortawesome/fontawesome-free/scss/brands";

@import "variables";
@import "layout";

@import "components/Header";
@import "components/Content";
@import "components/Footer";
@import "components/Hero";
@import "components/Form";
@import "components/RegisterForm";
@import "components/Input";
@import "components/Button";
@import "components/TagSelect";
@import "components/Tag";

@import "pages/index";
@import "pages/login";
@import "pages/register";
@import "pages/user_index";