title: resolving font path in scss file when using webpack
body: <p>I'm using webpack with my asp.net mvc core project. I'm able to bundle js files. But I can't resolve my font paths. </p>
  
  <p>I have this I'm scss file:</p>
  
  <pre><code>$font-path: '../fonts' !global; 
  
  /*fonts*/
  /* roboto-300 - latin */
  @font-face {
      font-family: 'Roboto';
      font-style: normal;
      font-weight: 300;
      src: url('#{$font-path}/roboto-v15-latin-300.eot'); /* IE9 Compat Modes */
      src: local('Roboto Light'), local('Roboto-Light'), url('#{$font-path}/roboto-v15-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('#{$font-path}/roboto-v15-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
      url('#{$font-path}/roboto-v15-latin-300.woff') format('woff'), /* Modern Browsers */
      url('#{$font-path}/roboto-v15-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
      url('#{$font-path}/roboto-v15-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
  }
  </code></pre>
  
  <p>File structure: </p>
  
  <pre><code>└── Project
      ├── assets
      │ └── scripts
      │   └── main.ts
      │ └── scss
      │   └── fonts
      │       └── roboto-condensed-v13-latin-700.eot
      │   └── main.scss
      │
      └── webpack.config.js
  
  var path = require('path');
  var extractTextPlugin = require("extract-text-webpack-plugin");
  var cleanWebpackPlugin = require('clean-webpack-plugin');
  var webpack = require('webpack');
  
  module.exports = {
      entry: {
          'role/role': './assets/scripts/role/roleVM.ts',
          main: './assets/scripts/main.ts',
          vendor: ["bootstrap", "popper.js", "jquery"]
      },
      output: {
          filename: 'js/[name].js',
          path: path.resolve(__dirname, 'wwwroot/dist/')
      },
      module: {
          rules: [
              {
                  test: /\.tsx?$/,
                  loader: 'ts-loader',
                  exclude: /node_modules/,
              },
              {
                  test: /\.scss$/,
                  use: extractTextPlugin.extract({
                      use: [{
                          loader: "css-loader", options: {
                              sourceMap: true
                          }
                      }, {
                          loader: "resolve-url-loader"
                      },
                      {
                          loader: "sass-loader", options: {
                              sourceMap: true
                          },
  
                      }],
                      fallback: 'style-loader'
                  }),
                  exclude: /node_modules/
              },
              {
                  test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
                  use: [{
                      loader: 'file-loader',
                      options: {
                          name: '[name].[ext]',
                          outputPath: 'fonts/'
                      }
                  }]
              }
          ]
      },
      plugins: [
          new cleanWebpackPlugin(['dist'], {
              root: path.resolve(__dirname, 'wwwroot'),
              verbose: true,
              dry: false
          }),
          new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: 'js/vendor.js' }),
          new extractTextPlugin("./css/main.css"),
          new webpack.ProvidePlugin({
              $: 'jquery',
              jQuery: 'jquery',
              'window.jQuery': 'jquery',
              'Popper': 'popper.js'
          })
      ],
      resolve: {
          extensions: [".tsx", ".ts", ".js", '.scss'],
          modules: [
              path.resolve('./'),
              path.resolve('./node_modules'),
          ]
      }
  };
  </code></pre>
  
  <p>When I build webpack, I get an error: </p>
  
  <blockquote>
    <p>ERROR in ./node_modules/css-loader?{"sourceMap":true}!./node_modules/resolve-url-loader!./node_modules/sass-loader/lib/loader.js?{"sourceMap":true}!./assets/scss/main.scss
        Module not found: Error: Can't resolve '../fonts/roboto-condensed-v13-latin-700.eot' in
    'C:\project\src\project\assets\scss'
         @ ./node_modules/css-loader?{"sourceMap":true}!./node_modules/resolve-url-loader!./node_modules/sass-loader/lib/loader.js?{"sourceMap":true}!./assets/scss/main.scss
    6:215433-215491</p>
  </blockquote>