gulp-sass：如何禁用添加背景图像的前缀路径

Question

大家好！

我正在开发一个网络应用程序，并使用 gulp-sass 将我的文件编译成 css。

项目结构示意图：

build/
  -image.png
  -build.css
src/
  -app/
     -component_1/
        -component.scss   

component.scss 内部：

div.component {
  background: url("/image.png") no-repeat center center;
}

这是我的 gulp 脚本，负责将 sass 编译成 css：

 gulp.task('sass', function () {
  return gulp.src("src/app/**/*.scss")
    .pipe(sass().on("error", sass.logError))
    .pipe(gulp.dest("./sass.compiled/"))
    .pipe(concatCss("build.css"))
    .pipe(gulp.dest("build"));
});

结果：gulp-scss 在背景的 url 属性前面加上路径：'component_1'。所以不是预期的：

background: url("/image.png") no-repeat center center;

我明白了：

background: url("component_1/image.png") no-repeat center center;

有没有办法，我可以制作 gulp-sass 来防止这种行为？

Answer 1

造成这种情况的不是gulp-sass，而是gulp-concat-css。正如package description 所说：

连接 css 文件，冒泡 @import 语句（按照标准），可选地重新定位 url 并内联本地 @import 语句。

您需要禁用可选的 url rebase。您可以使用rebaseUrls option：

gulp.task('sass', function () {
  return gulp.src("src/app/**/*.scss")
    .pipe(sass().on("error", sass.logError))
    .pipe(gulp.dest("./sass.compiled/"))
    .pipe(concatCss("build.css", { rebaseUrls: false }))
    .pipe(gulp.dest("build"));
});