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需要知道如何加载这种资产。npm install url-loader，并将以下规则添加到您的webpack配置中，该规则可解析常见的字体文件扩展名。

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