Question

我正在尝试使用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'设置为文本元素。）

我尝试了什么：

将.css个文件'url()中的路径更改为相对路径：错误出现了：

错误在./~/css-loader?{"sourceMap":true,"localIdentName":[name][local][hash:base64：3]“，”模块“： true，“minimize”：false，“importLoaders”：1}！。/〜/ postcss-loader！./ fonts / fonts.css找不到模块：错误：无法解析/ Users /中的模块'Roboto / Roboto.ttf' EnixCoda / projectName / fonts @ ./~/css-loader?{"sourceMap":true,"localIdentName":"[name][local][hash:base64:3]","modules “：true，”最小化“：false，”importLoaders“：1}！./~ / postcss-loader！./ fonts / fonts.css 6：135-163

有人可以帮助我吗？

Answer 1

完成此操作后，您需要将@font-face网址指向dist文件夹或webpack输出文件的位置（相对于请求它们的dist文件夹中的文件）。例如：

dist/
  assets/
    fonts/
      font-file.ttf
  css/
    style.css
  index.html

这将意味着@font-face路径将是../assets/fonts/font-file.ttf，完全与src目录无关。

如何在webpack的css-loader中使用@ font-face？

1 个答案: