使用 less.js 和 webpack 将 Font Awesome 加载为框

Question

我最近在我的 React/Electron.js 项目中调整了我的 webpack 模块，以使用 less-loader、css-loader 和 MiniCssExtractPlugin.loader 而不是 style-loader 编译更少的文件，因为在部分期间没有定义窗口编译，但现在字体真棒图标显示为框，我不确定这是为什么。

当我使用 style-loader 而不是 MiniCssExtractPlugin.loader 时，字体很棒的图标显示得很好，但我只对加载 .less 文件进行了这个更改，而不是其他任何东西，所以我很困惑为什么会受到影响。

我尝试按照here 的建议将.fa, .far, .fas { font-family: FontAwesome !important; } 添加到我的index.less 文件中，但这根本没有帮助。

我也尝试添加font-awesome-loader，但这似乎有sass-loader@*的依赖关系，我没有使用它。

是什么导致 Font Awesome 使用 style-loader 而不是 MiniCssExtractPlugin.loader 加载？我在下面包含了我的 webpack 模块和我的 font-awesome 导入：

module.exports = {
  module: {[
    {
      test: /\.node$/,
      use: 'node-loader',
    },
    {
      test: /\.(m?js|node)$/,
      parser: {amd: false},
      use: {
        loader: '@marshallofsound/webpack-asset-relocator-loader',
        options: {
          outputAssetBase: 'native_modules',
        },
      },
    },
    {
      test: /\.tsx?$/,
      exclude: /(node_modules|\.webpack)/,
      use: {
        loader: 'ts-loader',
        options: {
          transpileOnly: true,
        },
      },
    },
    {
      test: /\.css$/,
      use: [{loader: 'style-loader'}, {loader: 'css-loader'}],
    },
    {
      test: /\.(woff(2)?|ttf|eot|svg|jpg|png|ico|icns)(\?v=\d+\.\d+\.\d+)?$/,
      use: [
        {
          loader: 'file-loader',
          options: {
            name: '[path][name].[ext]',
            publicPath: '..',
          },
        },
      ],
    },
    {
      test: /\.less$/,
      use: [MiniCssExtractPlugin.loader, {loader: 'css-loader'}, {loader: 'less-loader'}],
      exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/, /\.(config|variables|overrides)$/],
    },
  ]},
  plugins: [
    new ForkTsCheckerWebpackPlugin(),
    new MiniCssExtractPlugin(),
  ],
  resolve: {
    extensions: ['.js', '.ts', '.jsx', '.tsx', '.less', '.css'],
  },
};

/* index.tsx */
import './index.less';
import '@fortawesome/fontawesome-free/css/all.css';
...

Answer 1

当我将 index.tsx 更改为 import '@fortawesome/fontawesome-free/js/all.js' 时，一切都得到了解决