title: gulp-less relative images paths not flattened?
body: <p>I have the following document structure</p>
  
  <pre><code>└── Content
      ├── Images
      │   ├──  document.png
      │   └──  document2.png
      └── Css
          ├──  Controls
          │    └──  Document.less
          └──  Main.less
  </code></pre>
  
  <p>Content/Css/Main.less:</p>
  
  <pre><code>@import "Controls/document.less";
  </code></pre>
  
  <p>Content/Css/Controls/Document.less:</p>
  
  <pre><code>.Document
  {
      .Image
      {
          background-image: url(../../Images/document.png);
      }
      .Image2
      {
          background-image: url('../../Images/document2.png');
      }
  }
  </code></pre>
  
  <p>if i run this with the following gulp script</p>
  
  <pre><code>var gulp = require('gulp'),
      less = require('gulp-less');
  
  gulp.task('css', function () {
      var source = 'Content/Css/Main.less';
      var destination = 'Content/Css';
      // place code for your default task here
      gulp.src(source)
          .pipe(less())
          .pipe(gulp.dest(destination));
  });
  </code></pre>
  
  <p>i get the following </p>
  
  <pre><code>.Document .Image {
    background-image: url(../../Images/document.png);
  }
  .Document .Image2 {
    background-image: url('../../Images/document2.png');
  }
  </code></pre>
  
  <p>Buf if i run this with dotless i get </p>
  
  <pre><code>.Document .Image {
    background-image:url(../Images/document.png)
  }
  .Document .Image2 {
    background-image:url('../Images/document2.png')
  }
  </code></pre>
  
  <p>Is there any way to get the same output with Gulp without changing the structure of the less code (Note: this is just a example in reality i have multiple folders and less files..).</p>