Elias Elias - 3 months ago 30
Sass (Sass) Question

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

Hello to everyone!

I'm developing a web app, and using gulp-sass to compile my files into css.

Schematic Project structure:

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


Inside component.scss:

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


Here is my gulp script, responsible for the compiling sass into 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"));
});


As the result: gulp-scss prepends background's url property with the path: 'component_1'. So instead of expected:

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


I get:

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


Is there a way, I could make gulp-sass to prevent such behavior?

Answer

It's not gulp-sass that is causing this, but gulp-concat-css. As the package description states:

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

You need to disable the optional url rebasing. You can do so using the 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"));
});
Comments