Question

我正在使用webpack2但无法加载ttf文件。我将scss文件定义如下：

fonts/font-roboto.scss：

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

从src/components/App.jsx导入此文件时，如下所示

import '../fonts/font-roboto.scss';

我得到以下错误：

ERROR in ../~/css-loader?{"sourceMap":true}!../~/sass-loader/lib/loader.js?{"sourceMap":true}!../~/resolve-url-load
er!../fonts/font-roboto.scss
Module not found: Error: Can't resolve 'url-loader' in '/Users/joey/dev/reactjs/jump/src'
 @ ../~/css-loader?{"sourceMap":true}!../~/sass-loader/lib/loader.js?{"sourceMap":true}!../~/resolve-url-loader!../
fonts/font-roboto.scss 6:84-126
 @ ../fonts/font-roboto.scss
 @ ./components/App.jsx
 @ ./index.jsx
 @ multi babel-polyfill ./index.jsx

我不知道如何解决这个问题。我的webpack配置文件如下：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  context: path.resolve(__dirname, './src'),
  entry: [
    'babel-polyfill',
    './index.jsx'
  ],
  output: {
    path: path.resolve(__dirname, './dist/'),
    publicPath: '/',
    filename: 'app.[hash].js'
  },
  module: {
    rules: [{
        test: /\.(jsx?)$/,
        exclude: /(node_modules|.tmp-globalize-webpack)/,
        use: ['babel-loader']
      },
      {
        test: /\.(jpe?g|png|gif)$/i,
        use: [
          'file-loader?hash=sha512&digest=hex&name=assets/[hash].[ext]',
          'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false'
        ]
      },
      {
        test: /\.(svg)$/i,
        use: [{
            loader: 'babel-loader'
          },
          {
            loader: 'react-svg-loader',
            query: {
              svgo: {
                plugins: [{
                  removeTitle: false
                }],
                floatPrecision: 2
              }
            }
          }
        ]
      },
      {
        test: /\.(png|woff|eot|ttf|woff2)(\?.*$|$)/,
        loader: 'url-loader?limit=100000&mimetype=application/font-woff'
      },
      {
        test: /\.(ttf|eot)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'file-loader?name=images/[hash].[ext]',
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'resolve-url-loader']
      },
      {
        test: /\.scss$/,
        use: [{
            loader: 'style-loader'
          },
          {
            loader: 'css-loader',
            options: {
              sourceMap: true
            }
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true
            }
          },
          {
            loader: 'resolve-url-loader'
          }
        ]
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx']
  },
  plugins: [
    new HtmlWebpackPlugin({ hash: false, template: './index.html' })
  ],
  node: {
    fs: 'empty',
    module: 'empty'
  }
};

我的文件夹结构如下所示：

安装url-loader后，错误消失，但我在浏览器控制台上收到了以下警告消息：

Failed to decode downloaded font: data:application/font-woff;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVib…BhdGhfXyArICJpbWFnZXMvZDMyOWNjOGIzNDY2N2YxMTRhOTU0MjJhYWFkMWIwNjMudHRmIjs=
localhost/:1 OTS parsing error: invalid version tag

Answer 1

查看您发布的错误消息：

Module not found: Error: Can't resolve 'url-loader'

您似乎需要安装url-loader - 在终端中使用npm i url-loader --save执行此操作。

Answer 2

从以下位置更改配置的这一位：

      {
        test: /\.(png|woff|eot|ttf|woff2)(\?.*$|$)/,
        loader: "url-loader?limit=100000&mimetype=application/font-woff",
      },
      {
        test: /\.(ttf|eot)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: "file-loader?name=images/[hash].[ext]",
      }

为：

  {
    test: /\.(ttf|eot|woff|woff2)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    loader: "file-loader?name=images/[hash].[ext]",
  }

如何使用webpack2加载ttf文件？

2 个答案: