javascript - Webpack 3 和在 CSS 中导入字体

Question

我正在使用 Backbone 构建一个 webpack 应用程序并尝试使用类似

的行导入我的 CSS

import './css/style.css';

但是我的 CSS 文件使用的是 True Type 字体。

@font-face {
  font-family: "Scramble";
  src: url(./scramble/Scramble.ttf) format("truetype");
}

我如何告诉 webpack 在哪里可以找到字体？我需要另一个装载机吗？

目前我得到:

Module not found: Error: Can't resolve './scramble/Scramble.ttf'

Answer 1

Webpack 需要知道如何加载那种 Assets 。 npm install url-loader 并将以下规则添加到您的 webpack 配置中，以解析常见的字体文件扩展名。

rules : [
  {
    test: /\.(woff|woff2|ttf|eot)$/,
    use: [
      {
        loader: 'url-loader',
        options: {
          limit: 10000,
          mimetype: 'application/octet-stream'
        }
      }
    ]
  }
 // more rules
]