title: Fonts with - Webpack with postcss
body: <p>Seems like I'm having a lot of problems recently with webpack :) But here goes another one for you guys:</p>
  
  <p><strong>Folder Structure</strong></p>
  
  <p><a href="https://i.stack.imgur.com/gQl3T.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gQl3T.png" alt="enter image description here"></a></p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code> @font-face {
      font-family: 'LatoBlack';
      src: url('/font/Lato-Black.eot'); /* IE9 Compat Modes */
      src: url('/font/Lato-Black.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('/font/Lato-Black.woff2') format('woff2'), /* Modern Browsers */
           url('/font/Lato-Black.woff') format('woff'), /* Modern Browsers */
           url('/font/Lato-Black.ttf') format('truetype');
      font-style: normal;
      font-weight: normal;
      text-rendering: optimizeLegibility;
  }
  </code></pre>
  
  <p><strong>Webpack Config</strong></p>
  
  <pre><code>'use strict';
  var path = require('path');
  var webpack = require('webpack');
  var HtmlWebpackPlugin = require('html-webpack-plugin');
  var ExtractTextPlugin = require('extract-text-webpack-plugin');
  var qs = require('querystring');
  var font = require('postcss-font-magician')({
      hosted: '/public/fonts'
  });
  var precss = require('precss');
  var autoprefixer = require('autoprefixer');
  var stripInlineComments = require('postcss-strip-inline-comments');
  
  module.exports = {
      devtool: 'eval-source-map',
      // resolve: { modulesDirectories: ['node_modules'], extension: ['', '.js', '.css'] },
      entry: [
          'webpack-hot-middleware/client?reload=true',
          path.join(__dirname, 'src/client/js/Kindred')
          // path.join(__dirname, 'app/main')
      ],
      output: {
          path: path.join(__dirname, '/public/'),
          filename: '[name].js',
          publicPath: '/'
      },
      plugins: [
          new HtmlWebpackPlugin({
              template: 'app/index.tpl.html',
              inject: 'body',
              filename: 'index.html'
          }),
          new webpack.optimize.OccurenceOrderPlugin(),
          new webpack.HotModuleReplacementPlugin(),
          new webpack.NoErrorsPlugin(),
          new webpack.DefinePlugin({
              'process.env.NODE_ENV': JSON.stringify('development')
          })
      ],
      module: {
          loaders: [{
              test: /\.jsx?$/,
              exclude: /node_modules/,
              loader: 'babel',
              query: {
                  "presets": ["react", "es2015", "stage-0", "react-hmre"]
              }
          }, {
              test: /\.json?$/,
              loader: 'json'
          },
              {test: /\.jpg$/, loader: "file-loader"},
              // Font Definitions
              {
                  test: /\.css$/,
                  loaders: [
                      'style-loader',
                      'css-loader?importLoaders&amp;' + qs.stringify({
                          modules: true,
                          importLoaders: 1,
                          localIdentName: '[path][name]-[local]'
                      }),
                      'postcss-loader?parser=postcss-scss'
                  ]
              },
              { test: /.(png|woff(2)?|eot|ttf|svg)(\?[a-z0-9=\.]+)?$/, loader: 'url-loader?limit=100000' }            
          ]
      },
      postcss: function (webpack) {
          return [
              stripInlineComments
              , require('postcss-fontpath' , {checkPath: true})
              , font
              , precss
              , autoprefixer
              , require('postcss-simple-vars')
              , require('postcss-nested'
                  , autoprefixer({browsers: ['last 2 versions']}))
          ];
      }
  };
  </code></pre>
  
  <p><strong>Error Messages</strong></p>
  
  <pre><code>ERROR in ./~/css-loader?importLoaders&amp;modules=true&amp;importLoaders=1&amp;localIdentName=%5Bpath%5D%5Bname%5D-%5Blocal%5D!./~/postcss-loader?parser=postcss-scss!./src/client/scss/main.css
  Module not found: Error: Cannot resolve 'file' or 'directory' ../../../client/font/fontello.eot in C:\var\www\webpack-express-boilerplate\src\client\scss
   @ ./~/css-loader?importLoaders&amp;modules=true&amp;importLoaders=1&amp;localIdentName=%5Bpath%5D%5Bname%5D-%5Blocal%5D!./~/postcss-loader?parser=postcss-scss!./src/client/scss/main.css 6:876-929 6:955-1008
  </code></pre>