使用 Next.js 在 Material-UI 中添加自托管字体 [重复]答案

【问题标题】：Add self hosted fonts in Material-UI with Next.js [duplicate]使用 Next.js 在 Material-UI 中添加自托管字体 [重复]
【发布时间】：2021-11-20 07:04:00
【问题描述】：

当我尝试使用 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;
            }
          `,
        },
      },
});

【问题讨论】：

您使用的是哪个模块捆绑器？不是Webpack？
我也在为此苦苦挣扎。我在 v4 中使用 overrides 的旧方法，但只需要遵循文档即可。当我像这样引用public/fonts 中的字体时，它起作用了：src: url('/fonts/BarcadeBrawl.woff2') format('woff2');
@ArthurBurgan 感谢兄弟终于可以在 mui v5 中使用

标签： reactjs webpack material-ui next.js

【解决方案1】：

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

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

// 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 一样直接引用。参考：Static File Serving

【讨论】：