title: Webpack: overwriting url for @font-face in SASS (Glyphicons)
body: <p>I've imported <code>"glyphicons-halflings": "1.9.0"</code>, which does not contain the actual fonts. Therefore the fonts are stored relative to my application in <code>app/assets/fonts</code>.</p>
  
  <p>I am dealing with errors such as this:</p>
  
  <pre><code>ERROR in ./~/css-loader?sourceMap!./~/resolve-url-loader!./~/sass-loader?sourceMap!./app/scss/application.scss
  Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/glyphicons-halflings-regular.eot in C:\work\myapp\src\MyApp.Web\app\scss
  @ ./~/css-loader?sourceMap!./~/resolve-url-loader!./~/sass-loader?sourceMap!./app/scss/application.scss 6:168498-168550 6:168573-168625
  </code></pre>
  
  <p><strong>To me, this seems as if the url defined in <code>node_modules/glyphicons-halflings/scss/glyphicons-halflings/_glyphicons-halflings.scss</code> is not correctly being overwritten</strong></p>
  
  <p><code>_glyphicons-halflings.scss</code> defines</p>
  
  <pre><code>@font-face {
    font-family: 'Glyphicons Halflings';
    src: url('../fonts/glyphicons-halflings-regular.eot');
    src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'),
         url('../fonts/glyphicons-halflings-regular.woff') format('woff'),
         url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'),
         url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
  }
  </code></pre>
  
  <p>My own <code>app/scss/_font.scss</code> defines</p>
  
  <pre><code>@font-face {
      font-family: 'Glyphicons Halflings';
      src: url('../assets/fonts/glyphicons/glyphicons-halflings-regular.eot');
      src: url('../assets/fonts/glyphicons/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
           url('../assets/fonts/glyphicons/glyphicons-halflings-regular.woff2') format('woff2'),
           url('../assets/fonts/glyphicons/glyphicons-halflings-regular.woff') format('woff'),
           url('../assets/fonts/glyphicons/glyphicons-halflings-regular.ttf') format('truetype'),
           url('../assets/fonts/glyphicons/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
  }
  </code></pre>
  
  <p>The only difference between these two are the urls. I define a relative path to the <code>_font.scss</code> (or rather, <code>application.scss</code>) but webpack cannot resolve the urls defined in the <code>glyphicons-halflings</code> module.</p>
  
  <p>Both these files are imported in the <code>app/scss/application.scss</code>:    </p>
  
  <pre><code>@import "variables";
  @import "mixins";
  @import "~bootstrap/scss/bootstrap";
  @import "~font-awesome/scss/font-awesome";
  @import "~glyphicons-halflings/scss/glyphicons-halflings";
  @import "bootstrap-override";
  @import "libs-override";
  
  @import "font";
  </code></pre>
  
  <p>I've set up webpack like this:
  <code>webpack.common.js</code></p>
  
  <pre><code>module: {
      loaders: [
          {
              test: /\.ts$/,
              include: helpers.root('app'),
              loaders: ['awesome-typescript-loader', 'angular2-template-loader']
          },
          {
              test: /\.html$/, // mostly angular templates
              include: helpers.root('app'),
              loader: 'html'
          },
          {
              test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?|$)/,
              include: helpers.root('app'),
              loader: 'file?name=[path][name].[hash].[ext]'             
          },
          {
              test: /\.scss$/,
              include: helpers.root('app'),
              loaders: ['style', 'css?sourceMap', 'resolve-url', 'sass?sourceMap']
          },
          {
              test: /\.css$/,
              include: helpers.root('app'),
              loader: 'to-string!css!resolve-url'
          }
      ]
  },
  </code></pre>
  
  <p>For reference, my folder structure is like this:</p>
  
  <pre><code>+-- app
  |    +-- assets
  |        +-- fonts
  |            +-- font-awesome
  |                +-- FontAwesome.otf
  |                +-- ...
  |            +-- glyphicons
  |                +-- ...
  |            +-- ...
  |        +-- icon
  |            +-- ...
  |        +-- ...
  |   +-- sass
  |       +-- _font.css
  |       +-- application.scss
  |       +-- ...
  |   +-- ...
  +-- appdist (later for server-side, if ever)
  +-- node_modules
  +-- ...
  +-- wwwroot
      +-- dist
          +-- ...webpack bundled content goes here...
  </code></pre>
  
  <p><strong>TL;DR</strong>
  package <code>glyphicons-halflings</code> 1.9.0 defines a <code>@font-face</code> which I'm having trouble to overwrite (because the urls are wrong). All SASS, webpack loader pipeline is <code>'style', 'css?sourceMap', 'resolve-url', 'sass?sourceMap'</code></p>