title: Webpack 4: mini-css-extract-plugin + file-loader not loading assets
body: <p>I'm trying to move assets (images and fonts) used in one of my <code>.scss</code>files, but it seems that they get ignored:</p>
  
  <p>This is my <strong>.scss</strong> file:</p>
  
  <pre><code>@font-face {
      font-family: 'myfont';
      src: url('../../assets/fonts/myfont.ttf') format('truetype');
      font-weight: 600;
      font-style: normal;
  }
  
  body {
      color: red;
      font-family: 'myfont';
      background: url('../../assets/images/bg.jpg');
  }
  </code></pre>
  
  <p>And this is my <strong>webpack.config.js</strong>:</p>
  
  <pre><code>const path = require('path');
  const { CheckerPlugin } = require('awesome-typescript-loader');
  const MiniCssExtractPlugin = require("mini-css-extract-plugin");
  
  module.exports = {
      target: 'node',
      entry: path.resolve(__dirname, 'server.tsx'),
      output: {
          filename: 'server_bundle.js',
          path: path.resolve(__dirname, 'build'),
          publicPath: '/build'
      },
      resolve: {
          extensions: ['.ts', '.tsx', '.js', '.jsx']
      },
      module: {
          rules: [{
                  test: /\.(tsx|ts)?$/,
                  loader: 'awesome-typescript-loader',
                  options: {
                      jsx: 'react'
                  }
              },
              {
                  test: /\.(scss|sass|css)$/,                
                  use: [
                      MiniCssExtractPlugin.loader,
                      { loader: 'css-loader', options: { url: false, sourceMap: true } },
                      { loader: 'sass-loader', options: { sourceMap: true } },                    
                  ]
              },
              {
                  test: /\.(png|svg|jpg|jpeg|gif)$/,
                  loader: 'file-loader',
                  options: { outputPath: 'public/images' }
              },
              {
                  test: /\.(woff|woff2|eot|ttf|otf)$/,
                  loader: 'file-loader',
                  options: { outputPath: 'public/fonts' }
              }
          ]
      },
      plugins: [
          new CheckerPlugin(),
          new MiniCssExtractPlugin({
              filename: 'public/styles_bundle.css',
              chunkFilename: "public/styles/[id].css"
          })
      ]
  }
  </code></pre>
  
  <p>I'm getting this <strong>.css</strong> file in my browser as the output (<strong>Note the name of the image</strong>):</p>
  
  <pre><code>body {
    color: red;
    background: url("../../assets/images/myimage.jpg"); 
  }
  </code></pre>
  
  <p>And in my <code>public</code> directory I get this:</p>
  
  <pre><code>public/
      styles_bundle.css
  </code></pre>
  
  <p>There are two problems here:</p>
  
  <ol>
  <li>Fonts are not compiled (<strong>No public/fonts/etc...</strong>)</li>
  <li>Images are not compiled</li>
  </ol>
  
  <p>I've been trying everything, but I don't know what may be happening here... Any Ideas?</p>