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 变基。您可以使用 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"));
});

gulp-sass: 如何禁止添加背景图片的前缀路径

gulp-sass: how to disable adding of prefixes path of background-image

javascript

css

sass

gulp

gulp-sass