title: Relative paths in CSS and Grunt minification?
body: <p>Before I ask this question I want to point out that there are <a href="https://stackoverflow.com/questions/22791811/handle-dependent-files-with-grunt-and-rewrite-paths">several</a> <a href="https://stackoverflow.com/questions/18254068/how-to-rewrite-urls-of-images-in-vendor-css-files-using-grunt?lq=1">similar</a> <a href="https://stackoverflow.com/questions/23916622/how-to-rewrite-relative-url-in-minified-css-with-cssmin">questions</a> <a href="https://stackoverflow.com/questions/21563766/grunt-cssmin-rebasing-a-relative-uri">posted</a> here on StackOverflow, but none of them provide an accurate solution to the problem.</p>
  
  <p><hr>
  <strong>The problem</strong></p>
  
  <p>I have a workflow setup where Grunt combines and minifies multiple css files into one single file for a production environment.</p>
  
  <p>The problem I'm facing is that font and image paths are breaking after running Grunt, as they're still pointing towards their existing relative file paths.</p>
  
  <p>As an example:</p>
  
  <p>Within <code>static/homepage/startup/common-files/css/icon-font.css</code> I have the following CSS rule: </p>
  
  <pre><code>@font-face{font-family:Flat-UI-Icons;src:url(../fonts/Startup-Icons.eot);
  </code></pre>
  
  <p>In my Gruntfile, I specify that I want the output of my minified css file to be <code>style.min.css</code> located at <code>static/css/custom/homepage/</code>. The problem with this is that the filepath changes, resulting in all font and image dependencies to no longer be found and return a 404 status in the browser.</p>
  
  <p><strong>What I've done to try solve this</strong></p>
  
  <p>I've figured that there are 2 options to fix this issue:</p>
  
  <ol>
  <li>Copy all dependant files so that they're relative to the new directory where<code>style.min.css</code> resides. The downside to this is that it could quickly become messy and ruin my project folder structure!</li>
  <li>Change the paths manually by hand. But then again, what's the point in this? Grunt was designed for automating tasks!</li>
  </ol>
  
  <p>Does anybody know how to fix this problem? I've wasted nearly 10 hours on this and I'm starting to give up. People have claimed to have fixed the issue over at the <a href="https://github.com/gruntjs/grunt-contrib-cssmin/issues/35" rel="noreferrer">Github issue page</a>, but nobody really says how they fixed it. </p>
  
  <p>EDIT:</p>
  
  <p>I've looked through the <a href="https://github.com/jakubpawlowicz/clean-css/blob/master/lib/clean.js" rel="noreferrer">clean-css library</a> source code and it seems that you can pass a <code>relativeTo</code> property to the minifier object. I've had a mess around with this but I'm still stuck. I'll report back if I get any further with this.</p>
  
  <p>EDIT:</p>
  
  <p>Okay I've finally found some documentation which explains what <code>relativeTo</code> (and other) properties do. I'm still stuck on exactly what my configuration should be for my file structure though....</p>
  
  <pre><code>relativeTo - path to resolve relative @import rules and URLs
  root - path to resolve absolute @import rules and rebase relative URLs
  roundingPrecision - rounding precision; defaults to 2; -1 disables rounding
  target - path to a folder or an output file to which rebase all URLs
  </code></pre>
  
  <hr>
  
  <p>Here's my Grunt configuration file for reference:</p>
  
  <pre><code>    module.exports = function(grunt) {
          grunt.initConfig({
              concat: {
                  homepage: {
                      src: [
                          'static/homepage/startup/common-files/css/icon-font.css', 
                          'static/homepage/startup/flat-ui/bootstrap/css/bootstrap.css',
                          'static/homepage/startup/flat-ui/css/flat-ui.css',
                          'static/homepage/static/css/style.css'
                      ],
                      dest: 'static/css/custom/homepage/compiled.css',
                  }
              },
              cssmin: {
  
                  homepage: {
                      src: 'static/css/custom/homepage/compiled.css',
                      dest: 'static/css/custom/homepage/style.min.css'
                  }   
              }                           
          });             
  
          grunt.loadNpmTasks('grunt-contrib-concat');
          grunt.loadNpmTasks('grunt-contrib-uglify');
          grunt.loadNpmTasks('grunt-contrib-cssmin');
          grunt.loadNpmTasks("grunt-css-url-rewrite");
          grunt.registerTask('build', ['concat', 'cssmin']);
          grunt.registerTask('default', ["build"]);
  };
  </code></pre>
  
  <p>Thanks.</p>