CSS Webpack无法加载字体文件：Unexpected Token

在本文中，我们将介绍CSS和Webpack的字体加载问题，并为您提供解决方案和示例说明。

阅读更多：CSS 教程

问题描述

在使用Webpack打包项目时，有时会遇到字体加载问题，错误信息可能类似于：“Webpack无法加载字体文件：Unexpected Token”。这种错误通常发生在尝试加载非标准字体文件时，比如.woff或.ttf等格式的字体文件。

解决方案

解决这个问题的方法有多种，我们接下来将介绍其中几种常见的解决方案。

1. 配置Webpack的file-loader

Webpack提供了file-loader插件，可以帮助我们正确加载字体文件。首先，确保您已在项目中安装了file-loader依赖：

npm install file-loader --save-dev

然后，在Webpack的配置文件中添加以下规则：

module: {
  rules: [
    {
      test: /.(eot|svg|ttf|woff|woff2)$/,
      loader: 'file-loader',
      options: {
        name: '[name].[ext]',
        outputPath: 'fonts/'
      }
    }
  ]
}

上述配置会告诉Webpack加载器，在遇到.eot、.svg、.ttf、.woff或.woff2格式的字体文件时，使用file-loader进行加载，并将字体文件输出到指定的目录。

2. 使用url-loader

除了file-loader，还可以使用url-loader插件来加载字体文件。url-loader可以将小于指定大小的字体文件转换为Data URL，从而减少了HTTP请求的数量。

首先，确保您已在项目中安装了url-loader依赖：

npm install url-loader --save-dev

然后，在Webpack的配置文件中添加以下规则：

module: {
  rules: [
    {
      test: /.(eot|svg|ttf|woff|woff2)$/,
      loader: 'url-loader',
      options: {
        limit: 8192, // 指定字体文件的大小阈值
        name: '[name].[ext]',
        outputPath: 'fonts/'
      }
    }
  ]
}

3. 使用resolve-url-loader

如果您使用的字体文件是相对于CSS文件的相对路径，可能会出现路径解析错误。为了解决这个问题，可以使用resolve-url-loader插件。

首先，确保您已在项目中安装了resolve-url-loader依赖：

npm install resolve-url-loader --save-dev

然后，在Webpack的配置文件中添加以下规则：

module: {
  rules: [
    {
      test: /.(eot|svg|ttf|woff|woff2)$/,
      use: [
        {
          loader: 'resolve-url-loader',
          options: {
            keepQuery: true
          }
        },
        {
          loader: 'url-loader',
          options: {
            limit: 8192,
            name: '[name].[ext]',
            outputPath: 'fonts/'
          }
        }
      ]
    }
  ]
}

4. 使用外部链接

如果您的字体文件较大，并且不希望将其打包到Webpack中，可以考虑使用外部链接来加载字体文件。将字体文件上传到可访问的服务器上，并在CSS文件中使用绝对路径来引用字体文件。

@font-face {
  font-family: 'CustomFont';
  src: url('https://example.com/fonts/CustomFont.woff2') format('woff2');
}

示例说明

假设我们有一个项目，使用了自定义的字体文件CustomFont.woff2，并且按照上述方法配置了Webpack。

body {
  font-family: 'CustomFont', sans-serif;
}

Webpack会将该CSS文件中的字体文件加载并输出到指定的目录（例如/fonts/CustomFont.woff2）。最终，在构建完成后，页面上的文字将以自定义字体显示。

总结

在本文中，我们介绍了在Webpack中将字体文件加载到CSS中时可能遇到的问题，并提供了解决方案和示例说明。通过正确配置Webpack的加载规则，我们可以成功加载自定义的字体文件，并在网页中应用它们。希望本文对您理解和解决相关问题有所帮助。