为什么模块解析失败:/xxx/MyFont.ttf意外字符"

本文介绍了为什么模块解析失败:/xxx/MyFont.ttf意外字符"的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我遇到此错误

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

我的webpack配置如下:

my webpack config is as follow:

rules: [
  {
    test: /\.jsx?$/,
    exclude: /node_modules/,
    loader: 'babel-loader',
    query: babelQuery
  },{
    test: /\.css$/,
    use: [
      'style-loader',
      'css-loader'
    ]
  },
  {
    test: /\.less$/i,
    use: ExtractTextPlugin.extract([ 'css-loader', 'less-loader' ])
  },
  { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
]

有人知道如何解决吗?

推荐答案

将此添加到您的rules数组.

{
  test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
  loader: 'file-loader?name=assets/[name].[hash].[ext]'
}

，您应该使用npm install安装file-loader.希望对您有帮助.

and you should install the file-loader using npm install.Hope this will help you.

这篇关于为什么模块解析失败:/xxx/MyFont.ttf意外字符"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！