如何使用 Webpack 5 从 LESS 文件加载字体？

Question

我正在使用 Webpack 5 并从 .less 文件加载字体和其他样式。但是，fonts/styles 似乎没有加载，我正在尝试找出原因。

bootstrap.less

@import (less) '~bootstrap/dist/css/bootstrap.css';

@font-face {
  font-family: 'Gibson';
  src: url('~fonts/gibson/gibson-semibold.otf') format('opentype');
  font-weight: bold;
}

@font-face {
  font-family: 'Gibson';
  src: url('~fonts/gibson/gibson-regular.otf') format('opentype');
  font-weight: normal;
}

配置

{
  module: {
    rules: [
      {
        test: /\.otf$/,
        include: path.resolve(__dirname, './src/fonts'),
        use: {
            loader: 'file-loader',
            options: {
                name: '[name].[ext]',
                outputPath: 'fonts/',
                esModule: false
            },
        },
    },
      {
        test: /\.less$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              url: false,
            },
          },
          { loader: 'less-loader' },
        ],
      },
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: true,
              url: false,
            },
          },
        ],
      },
    ],
  },
};

我在 Rails 上使用 React 和 Webpacker，bootstrap.css 位于 node_modules/bootstrap/dist/css 下。两个 .otf 字体文件位于 public/packs/assets/fonts/gibson 和 app/assets/fonts/gibson.

下

我错过了什么？我可以看到 webpack 至少可以识别字体文件：

...
odules by path ./app/assets/ 579 KiB
    modules by path ./app/assets/stylesheets/application/*.less 76.7 KiB 62 modules
    modules by path ./app/assets/stylesheets/*.less 502 KiB 4 modules
    modules by path ./app/assets/images/ 362 bytes 4 modules
    modules by path ./app/assets/fonts/gibson/*.otf 173 bytes 2 modules
webpack 5.68.0 compiled successfully in 7608 ms

但是，我没有看到网站本身加载的字体。在我的主要 application.jsx 中，我是这样导入的： import 'stylesheets/bootstrap.less';

Answer 1

我能够通过添加解决此问题：

*{font-family:Gibson;}

到我的 bootstrap.less 文件。我真的不确定这是最好的方法，但它确实有效。

如何使用 Webpack 5 从 LESS 文件加载字体？

How to load fonts from LESS file with Webpack 5?

fonts

less

webpack

webpack-file-loader

less-loader