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

Question

大家好！

我正在开发一个web应用程序，并使用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; 
} 

这里是我一饮而尽脚本，负责编制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在路径'component_1'前面加上背景的url属性。因此，而不是预期：

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

我得到：

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

有没有一种方法，我可以做一饮而尽，青菜，以防止这种行为？

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")); 
});