javascript - Webpack 5字体 Assets 问题，没有错误但也没有字体

Question

我正在尝试在我的 scss 文件中使用 @font-face 声明。
正在应用正确的 CSS 规则，因此 font-face 声明看起来不错。路径也正在得到解决，所以这没有问题。而且，webpack 不会抛出任何错误，因此它似乎不是任何类型的加载程序问题。但最终，字体仍然没有被浏览器渲染。 (see image)
从 Webpack 5 开始，the documentation声明您可以在规则中声明“类型:'asset/resource'”以正确加载诸如字体或图像之类的 Assets 。它适用于我加载的图像，但不适用于字体。
CSS:

@font-face {
    font-family: 'Yusei Magic', sans-serif;
    font-style: normal;
    font-weight: 400;
    src: url('./assets/fonts/yusei-magic/YuseiMagic-Regular.ttf')
        format('truetype');
}

网络包配置:

module: {
...
        rules: [
            ...
            {
                test: /\.ttf$/,
                type: 'asset/resource',
            },
        ],
    },

Answer 1

由于字体被css函数url()引用，也需要添加负责的 Webpack 加载器。
如果没有安装:

npm install --save-dev style-loader css-loader

规则堆栈应如下所示:

 rules: [
   ...
   {
     test: /\.css$/i,
     use: ['style-loader', 'css-loader'],
   },
   {
     test: /\.(woff|woff2|eot|ttf|otf)$/i,
     type: 'asset/resource',
   },
   ...
 ]

详情可查看 here (loading-css)和 here (loading-fonts) . css-loader翻译 @import和 url()喜欢 import/require()并将解决它们。