我有以下文档结构
└── Content
├── Images
│ ├── document.png
│ └── document2.png
└── Css
├── Controls
│ └── Document.less
└── Main.less
内容/Css/Main.less:
@import "Controls/document.less";
内容/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');
}
如果我用 dotless 运行它,我会得到
.Document .Image {
background-image:url(../Images/document.png)
}
.Document .Image2 {
background-image:url('../Images/document2.png')
}
有什么方法可以在不改变更少代码结构的情况下使用 Gulp 获得相同的输出(注意:这只是一个示例,实际上我有多个文件夹和更少的文件..)。