title: Error: You may need an appropriate loader to handle this file type
body: <p>Trying to set up a react web app but keep running into this error after trying to implement semantic-UI by putting import "semantic-ui-css/semantic.min.css"; in index.jsx. </p>
  
  <p>I npm installed css-loader and style-loader as thats the error I was getting prior to this new error. </p>
  
  <p>My guess is a webpack.config needs to be adjusted to handle the loaders differently but I'm unsure on how to proceed with this.  </p>
  
  <pre><code>ERROR in ./node_modules/semantic-ui-css/themes/default/assets/fonts/outline-icons.woff
  Module parse failed: C:\Users\Shawn\Documents\GitHub\Galavue\Galavue\node_modules\semantic-ui-css\themes\default\assets\fonts\outline-icons.woff Unexpected character ' ' (1:4)
  You may need an appropriate loader to handle this file type.
  (Source code omitted for this binary file)
   @ ./node_modules/css-loader/dist/cjs.js!./node_modules/semantic-ui-css/semantic.min.css 15:42-101
   @ ./node_modules/semantic-ui-css/semantic.min.css
   @ ./react-client/src/index.jsx
  </code></pre>
  
  <p>Package.json</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>{
    "name": "galavue",
    "version": "0.0.0",
    "description": "Galavue",
    "main": "server.js",
    "author": "Shawn",
    "scripts": {
      "dev": "webpack -d --watch",
      "start": "node ./server/index.js",
      "build": "webpack -p",
      "react-dev": "webpack -d --watch",
      "server-dev": "nodemon server/index.js"
    },
    "repository": {
      "type": "git",
      "url": "git+https://github.com/www.github.com/shawnSFU.git"
    },
    "license": "ISC",
    "bugs": {
      "url": "https://github.com/www.github.com/shawnSFU/issues"
    },
    "homepage": "https://github.com/www.github.com/shawnSFU#readme",
    "dependencies": {
      "babel-core": "^6.25.0",
      "babel-loader": "^7.1.1",
      "babel-preset-es2015": "^6.24.1",
      "babel-preset-react": "^6.24.1",
      "body-parser": "^1.17.2",
      "express": "^4.15.3",
      "react": "^15.6.1",
      "react-dom": "^15.6.1",
      "react-router": "^4.1.2",
      "react-router-dom": "^4.1.2",
      "semantic-ui-css": "^2.4.1",
      "semantic-ui-react": "^0.85.0",
      "webpack": "^3.4.1"
    },
    "devDependencies": {
      "css-loader": "^2.1.0",
      "style-loader": "^0.23.1"
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>webpack.config.js</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>//defines the entry and output points for our application
  const path = require('path');
  const SRC_DIR = path.join(__dirname, '/react-client/src');
  const DIST_DIR = path.join(__dirname, '/react-client/dist');
  const webpack = require('webpack');
  module.exports = {
      entry: `${SRC_DIR}/index.jsx`,
      output: {
          path: DIST_DIR,
          filename: 'bundle.js',
      },
      resolve: {
          extensions: ['.js', '.jsx', '.json', '.css'],
      },
     
      module: {
          rules: [
              {
                  test: /\.css$/,
                  loader: 'style-loader!css-loader'
              },
              {
                  test: /\.png$/,
                  loader: 'url-loader?limit=100000&amp;minetype=image/png'
              },
              {
                  test: /\.jpg/,
                  loader: 'file-loader'
              },
              {
                  test: /\.jsx?/,
                  include: SRC_DIR,
                  loader: 'babel-loader',
                  query: {
                      presets: ['react', 'es2015']
                  }
              }
          ]
      },
      plugins: [
          new webpack.DefinePlugin({
              'process.env.NODE_ENV': JSON.stringify('production')
          })
      ]
  };</code></pre>
  </div>
  </div>
  </p>