小编Eni*_*oda的帖子

我正在尝试使用webpack在我的项目中导入一些字体(如Roboto),但它们都不起作用.

我的文件结构如下所示:

+-src---fonts-+-Roboto---Roboto.ttf
|             |
|             +-fonts.css
|
+-webpack.config.js

我的fonts.css档案:

@font-face {
    font-family: 'Roboto';
    src: url(/Roboto/Roboto.ttf) format('truetype');
}

我webpack.config.js看起来像这样:

//...
loaders: [
  {
    test: /\.css/,
    loaders: [
      'style-loader',
      `css-loader?${JSON.stringify({
        sourceMap: isDebug,
        localIdentName: isDebug ? '[name]_[local]_[hash:base64:3]' : '[hash:base64:4]',
        modules: true,
        minimize: !isDebug,
        importLoaders: 1
      })}`,
      'postcss-loader',
    ],
  },
  {
    test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
    loader: 'url-loader',
  },
  {
    test: /\.(wav|mp3|eot|ttf)$/,
    loader: 'file-loader',
  },
],
//...

当我运行webpack时,没有出现错误.但是Roboto没有加载字体(文本仍然是默认的字体系列,尽管我已经设置font-family: 'Roboto'为文本元素).

我尝试过的:

1. 将.css文件中的路径更改url()为相对路径:出现错误:

   ERROR …