时间戳

首页 > 解决方案 > Webpack 5字体资产问题，没有错误但也没有字体

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

问题描述

我正在尝试在我的 scss 文件中使用 @font-face 声明。

正在应用正确的 CSS 规则，因此 font-face 声明看起来不错。路径也正在得到解决，所以这没有问题。而且，webpack 不会抛出任何错误，因此它似乎不是任何类型的加载程序问题。但最终，字体仍然没有被浏览器渲染。（见图）

从 Webpack 5 开始，文档声明您可以在规则中声明“type: 'asset/resource'”以正确加载诸如字体或图像之类的资产。它适用于我加载的图像，但不适用于字体。

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',
            },
        ],
    },

标签： javascriptcsswebpack

解决方案

由于字体是由 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',
   },
   ...
 ]

可以在此处 (loading-css)和此处 (loading-fonts)找到详细信息。

css-loader解释@import和url()喜欢import/require()并将解决它们。

推荐阅读