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脚本，负责将css编译成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使用路径'component_1'来预设背景的url属性。所以不是预期的：

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语句（根据标准），可选地重新定位网址并内联本地@import语句。

您需要停用可选的网址变基。您可以使用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：如何禁用添加背景图像的前缀路径

1 个答案: