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

问题描述

问 题

我使用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;
}

解决方案

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

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

这篇关于css - 使用gulp-sass编译导致background相对路径出错问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！