title: Assets missing in Angular application built using grunt
body: <p>I have built an application using Yeoman and AngularJS (and all the stuff that goes along with it like Grunt and Bower).</p>
  
  <p>It all works perfectly when running locally using <code>grunt serve</code>.  However, after running grunt and deploying the application, there are a couple of missing assets and I'm not sure what the best way to solve it is.</p>
  
  <p>Firstly, running Grunt seems to copy the images across to dist but it renames them without adjusting the references in the CSS.  <code>app/images/uparrow.png</code> becomes <code>dist/images/3f84644a.uparrow.png</code>.</p>
  
  <p>Here is a line from the main.scss:</p>
  
  <pre><code>.table.sortable th.sorted-asc        { background-image: url(../images/uparrow.png); }
  </code></pre>
  
  <p>When it is compiled to CSS during the build process, it doesn't rewrite the path so the browser tries to load <code>dist/images/uparrow.png</code> which is missing.</p>
  
  <p>Secondly, there is an issue with loading the fonts for the Bootstrap plugin.  The bootstrap CSS at <code>app/bower_components/bootstrap/dist/css/bootstrap.css</code> references <code>../fonts/glyphicons-halflings-regular.woff</code>.  The relative path gets resolved to <code>app/bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.wof</code> and that works perfectly.</p>
  
  <p>Once built though, the vendor CSS gets combined and minified into a single CSS file at <code>dist/styles/8727a602.vendor.css</code>.  The relative path to the font doesn't get rewritten though.  So it tries to look for fonts in the <code>dist/fonts</code> folder, rather than <code>dist/bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.wof</code> where the file actually is.</p>
  
  <p>Any advice much appreciated.</p>