吞噬不多的相對圖像路徑不平坦？

Question

我有以下文件結構

└── Content 
    ├── Images 
    │ ├── document.png 
    │ └── document2.png 
    └── Css 
     ├── Controls 
     │ └── Document.less 
     └── Main.less 

內容/ CSS/Main.less：

@import "Controls/document.less"; 

內容/ CSS /控制/ Document.less：

.Document 
{ 
    .Image 
    { 
     background-image: url(../../Images/document.png); 
    } 
    .Image2 
    { 
     background-image: url('../../Images/document2.png'); 
    } 
} 

如果用完這與以下吞嚥腳本

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)); 
}); 

我得到以下

.Document .Image { 
    background-image: url(../../Images/document.png); 
} 
.Document .Image2 { 
    background-image: url('../../Images/document2.png'); 
} 

BUF如果我無點運行此我得到

.Document .Image { 
    background-image:url(../Images/document.png) 
} 
.Document .Image2 { 
    background-image:url('../Images/document2.png') 
} 

有沒有什麼辦法讓與咕嘟咕嘟相同的輸出不改變較少的代碼結構（注：這只是一個例子，我有多個文件夾和更少的文件..）。

Answer 1

我發現解決方案將{ relativeUrls: true }添加到less()，它的工作原理如下。