@import syntax inside css file not resolving font file

Question

I am working on a react application and trying to implement CSS + Fonts.

In my react component CSS file I have regular CSS and at the very top I import my mixins

@import '../../mixins.css';
/*CSS*/

Inside my mixin file I have

mixin.css

@font-face {
  font-family: 'SourceSansPro-Black';
  src: url("./SourceSansPro-Black.ttf") format('truetype');
  font-weight: normal;
  font-style: normal;
}

Webpack throws an error

Error: Cannot resolve 'file' or 'directory' ./SourceSansPro-Black.ttf

This is my webpack config module loadres

module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel',
        include: [
          path.resolve(__dirname, 'src/app')
        ]
      },
      {
        test: /\.css$/,
        include: [
          path.resolve(__dirname, 'src/app/styles'),
          path.resolve(__dirname, 'src/app/components')
        ],
        loader: combineLoaders([
          {
            loader: 'style'
          },
          {
            loader: 'css',
            query: {
              modules: true,
              sourceMap: true,
              localIdentName: '[folder]__[local]--[hash:base64:10]'
            }
          },
          {
            loader: 'postcss'
          }
        ])
      },
      // Font Definitions
      {
        test: /\.ttf$/,
        include: [
          path.resolve(__dirname, 'src/app/assets/fonts')
        ],
        loader: 'url',
        query: {
          limit: 50000,
          mimetype: 'application/octet-stream',
          name: './fonts/[name].[ext]'
        }
      }
    ]
  },

and the postcss

postcss: (_webpack) => {
    return [
      require('postcss-import')({
        addDependencyTo: _webpack,
        path: [ 'styles', 'components'],
        root: path.resolve(__dirname, 'src/app'),
        skipDuplicates: true
      }),
      require('postcss-cssnext')()
    ];
  },

I dont' understand why the url isn't resolving correctly.

UPDATE I have a font.css file that looks like this

@font-face {
  font-family: 'SourceSansPro-Bold';
  src: url('./SourceSansPro-Bold.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'SourceSansPro-Regular';
  src: url('./SourceSansPro-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'SourceSansPro-Light';
  src: url('./SourceSansPro-Light.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

I then import the font.css into a mixins.css file

@import '../fonts/fonts.css';
:root {
  --regular: {
    font-family: 'SourceSansPro-Regular';
    font-style: normal;
    font-weight: normal;
  }
}

Then in my react component I have this:

@import 'styles/mixins.css';

.regular {
  @apply --regular;
}

There is no error (or warning) that states any issues with loading the fonts via the url().

webpack.config

module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel',
        include: [
          path.resolve(__dirname, 'src/app')
        ]
      },
      {
        test: /\.css$/,
        include: [
          path.resolve(__dirname, 'src/app/assets/fonts'),
          path.resolve(__dirname, 'src/app/assets/styles'),
          path.resolve(__dirname, 'src/app/components')
        ],
        loader: combineLoaders([
          {
            loader: 'style',
          },
          {
            loader: 'css',
            query: {
              modules: true,
              sourceMap: true,
              localIdentName: '[folder]__[local]--[hash:base64:10]'
            }
          },
          {
            loader: 'resolve-url',
            query: {
              sourceMap: true,
              silent: false,
              fail: true,
              keepQuery: true
            }
          },
          {
            loader: 'postcss',
            query: {
              sourceMap: true
            }
          }
        ])
      },
      // Font Definitions
      {
        test: /\.ttf$/,
        include: [
          path.resolve(__dirname, 'src/app/assets/fonts')
        ],
        loader: 'url',
        query: {
          limit: 100000,
          mimetype: 'application/octet-stream',
          name: './fonts/[name].[ext]'
        }
      }
    ]
  }

An interesting thing is that if I use the ExtractTextWebpackPlugin on the CSS the above works, the fonts get rendered. If I do it this way the tradeOff is there is no CSS hot reloading.

Any suggestions on how to get the fonts to load without the extract-text plugin?