使用 Next.js 在 Material-UI 中添加自托管字体

Question

当我尝试使用 Next.js 在 Material UI 5 中添加自托管字体时遇到问题。我收到这个错误：

您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件。请参阅 https://webpack.js.org/concepts#loaders（此二进制文件省略了源代码）

file-loader即使我在这里添加了next.config.js：

module.exports = {
  module: {
    rules: [
      {
      test: /\.(woff|woff2|eot|ttf|otf)$/,
      use: ['file-loader'],
    },
    ],
  },
};

这是我的自定义主题：

PS：我在本地的字体名称是BarcadeBrawl.ttf。

import { createTheme } from "@mui/material";
import { purple, blue } from '@mui/material/colors';
import BarcadeBrawl from '../assets/fonts/BarcadeBrawl.ttf'

export const theme = createTheme({
    palette: {
        primary: {
            main: purple[500],
        },
        secondary: {
            main: blue[500],
        },
    },
    typography: {
        fontFamily: 'BarcadeBrawl',
        fontSize: 12,
    },
    components: {
        MuiCssBaseline: {
          styleOverrides: `
            @font-face {
              font-family: 'BarcadeBrawl';
              font-style: normal;
              font-display: swap;
              font-weight: 400;
              src: local('BarcadeBrawl'), local('BarcadeBrawl'), url(${BarcadeBrawl}) format('ttf');
              unicodeRange: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF;
            }
          `,
        },
      },
});

Answer 1

首先，这不是 Next.js 中 Webpack 的配置方式。请参阅官方文档 - Custom Webpack Config。其次，file-loaderWebpack v5 已弃用（较新的 Next.js 版本的默认设置）。请改用资产模块。

所以你可能需要做这样的事情：

// next.config.js
// https://webpack.js.org/guides/asset-management/#loading-fonts

module.exports = {
  // other configs...

  // future: { webpack5: true }, // -- not needed since Next.js v11.0.0
  webpack(config) {
    config.module.rules.push({
      test: /\.(woff|woff2|eot|ttf|otf)$/i,
      issuer: { and: [/\.(js|ts|md)x?$/] },
      type: 'asset/resource',
    });
    return config;
  },
};

而且，这不是必需的，您可以简单地将fonts目录存储在public目录中并使用它们。无需导入它们。它们可以像 一样直接引用/fonts/BarcadeBrawl.ttf。请参阅：静态文件服务