javascript - 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状态:

Concatenates css files, bubbling up @import statements (as per the standard), and optionally rebasing urls and inlining local @import statements.

您需要禁用可选的 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"));
});