title: Webpack can't load fonts (ttf)
body: <p>Currently I have 3 fonts that I want to add to my React project:<em>a, a light, a bold</em>. 
  <br>
  My file structure:</p>
  
  <pre><code>/src
  ├── /fonts/
  │   ├── /A.ttf
  │   ├── /A-light.ttf
  │   └── /A-bold.ttf
  │  
  ├── /styles/
  │   ├── /base/
  │   │   └── /__base.scss
  │   └── styles.scss
  │ 
  ├── app.jsx
  └── webpack.config.js
  </code></pre>
  
  <p>_base.scss:</p>
  
  <pre><code>@font-face {
    font-family: "A";
    font-style: normal;
    font-weight: 400;
    src: url("../../fonts/A.ttf") format("truetype");
  }
  
  @font-face {
    font-family: "A";
    font-style: normal;
    font-weight: 800;
    src: url("../../fonts/A-bold.ttf") format("truetype");
  }
  @font-face {
    font-family: "A";
    font-style: normal;
    font-weight: 300;
    src: url("../../fonts/A-light.ttf") format("truetype");
  }
  body {
    font-family: A, Helvetica, Arial, sans-serif;
  }
  </code></pre>
  
  <p>_base.scss is imported by styles.scss and styles.scss is imported in app.jsx.<br><br>
  My webpack config looks like this:
  <br>
  webpack.config.js</p>
  
  <pre><code>const path = require('path');
  const webpack = require('webpack');
  const ExtractTextPlugin = require('extract-text-webpack-plugin');
  const StyleLintPlugin = require('stylelint-webpack-plugin');
  
  process.env.NODE_ENV = process.env.NODE_ENV || 'development';
  console.log(process.env.NODE_ENV);
  if (process.env.NODE_ENV === 'development') {
    require('dotenv').config({path: '.env.development'});
  }
  
  module.exports = env =&gt; {
    const isProduction = env === 'production';
    const CSSExtract = new ExtractTextPlugin('styles.css');
  
    return {
      entry: ['babel-polyfill', './src/app.jsx'],
      output: {
        path: path.join(__dirname, 'public', 'dist'),
        filename: 'bundle.js'
      },
      resolve: {
        extensions: ['.js', '.jsx', '.json', '.css', '.scss']
      },
      module: {
        rules: [
          {
            exclude: /(node_modules|bower_components)/,
            test: /\.jsx?$/,
            use: ['babel-loader', 'eslint-loader']
          },
          {
            test: /\.s?css$/,
            use: CSSExtract.extract({
              use: [
                {
                  loader: 'css-loader',
                  options: {
                    sourceMap: true
                  }
                },
                {
                  loader: 'sass-loader',
                  options: {
                    sourceMap: true
                  }
                }
              ]
            })
          },
          {
            test: /\.(png|jpg|svg)$/,
            use: {
              loader: 'url-loader'
            }
          },
          {
            test: /\.(ttf|eot|woff|woff2)$/,
            loader: 'file-loader',
            options: {
              name: 'fonts/[name].[ext]'
            }
          }
        ]
      },
      plugins: [
        CSSExtract,
        new webpack.DefinePlugin({
          'process.env.API_AUTH_TOKEN': JSON.stringify(process.env.API_AUTH_TOKEN),
          'process.env.API_EMAIL': JSON.stringify(process.env.API_EMAIL),
          'process.env.API_PASSWORD': JSON.stringify(process.env.API_PASSWORD)
        }),
        new StyleLintPlugin({})
      ],
      devtool: isProduction ? 'source-map' : 'inline-source-map',
      devServer: {
        overlay: {
          warnings: true,
          errors: true
        },
        contentBase: path.join(__dirname, 'public'),
        historyApiFallback: true,
        publicPath: '/dist/'
      }
    };
  };
  </code></pre>
  
  <p>However Webpack fails to compile. </p>
  
  <p>Error:</p>
  
  <blockquote>
    <p>./src/styles/styles.scss
        Module build failed: ModuleNotFoundError: Module not found: Error: Can't resolve '../../fonts/A.ttf'</p>
  </blockquote>
  
  <p>Any help will be appreciated!</p>