使用gulp-sass编译导致background相对路径出错问题

Question

我使用gulp-sass插件编译scss文件，scss文件内有定义：

background: url(../../static/images/test.jpg)

编译后却变成了：

background: url(../images/test.jpg)

google了好久都没找到原因，希望有知道的朋友们告诉下解决办法，万分感谢！

下面贴gulp task代码：

gulp.task("build-sass", function () {
    return gulp.src(config.scss)
            .pipe($.plumber())
            .pipe($.sass())
            .pipe($.cleanCss({compatibility: 'ie8'}))
            .pipe($.rename({extname: '.css'}))
            .pipe(gulp.dest(config.dist + "/css"));
});

scss代码：

%bg-box{
  background: url('../../static/images/test1.jpg') center no-repeat;
  background-size: cover;
  position: relative;
}

.bg-box-100{
  @extend %bg-box;
  width: 100px;
  height: 120px;
}

输出结果：

.bg-box-100 {
    background: url(../images/test1.jpg) center no-repeat;
    background-size: cover;
    width: 100px;
    height: 120px;
}

Answer 1

后面自己解决了。路径不要使用相对路径，直接使用绝对路径就好了：

如: background: url(/static/images/test1.jpg)

Answer 2

改成绝对路径也算解决？？

Answer 3

gulp-sass 单独运行没有错误，倒是 gulp-clean-css 出现了相似的问题，加入参数 {rebase: false} 就好了