gulp-较少的相对图像路径未展平？

Question

我有以下文档结构

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

Content/Css/Main.less:

@import "Controls/document.less";

Content/Css/Controls/Document.less:

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

如果我运行使用以下 gulp 脚本

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

有没有什么方法可以在不改变 less 代码结构的情况下使用 Gulp 获得相同的输出（注意：这只是现实中的一个例子，我有多个文件夹和更少的文件..）。

Answer 1

我找到了将 { relativeUrls: true } 添加到 less() 的解决方案，它按预期工作。

gulp-较少的相对图像路径未展平？

gulp-less relative images paths not flattened?

dotless

gulp

gulp-less