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

Question

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

当我使用 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'

时，一切都已修复

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

Font Awesome loading as boxes with less.js and webpack

javascript

webpack

less

font-awesome

mini-css-extract-plugin