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

Question

我有一个问题，当我尝试添加自托管字体在材质UI 5与Next.js。我得到了这个错误:

你可能需要一个合适的加载器来处理这个文件类型，目前没有配置加载器来处理此文件。看到https://webpack.js.org/concepts#loaders(此处省略源代码二进制文件)

我甚至在next.config.js中添加了file-loader:

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

这是我的自定义主题:

PS:我的字体名称在本地是barcaddebrawl .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

首先，这不是Webpack在Next.js中的配置方式。参考官方文档-自定义Webpack配置。其次，file-loader在Webpack 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一样被直接引用。参考:静态文件服务